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内 容 提 要 
《精通 Ext JS》 站 在 开发 者 的 角度 思考 问题 ， 用 实际 示例 讲解 如 何 用 Ext JS 组 件 实现 绝妙 的 应 用 程序 ， 
并 展现 从 界面 原型 到 产品 化 构造 的 各 个 阶段 ， 最 终 实现 一 个 完整 的 应 用 程序 。Loiane Groner 将 带 我 们 构建 
应 用 结构 、 启 动 界面 、 登 录 界 面 、 多 语言 支持 功能 、 行 为 监控 功能 、 取 决 于 用 户 权 限 的 动态 菜单 ， 以 及 (或 
简单 或 复杂 的 ) 数据 库 信息 管理 模块 。 之 后 ， 我 们 会 学 习 产 品 构 造 方法 、 将 Web 应 用 转换 成 原生 桌面 应 用 ， 
以 及 调试 与 测试 。 本 书后 面 还 专 设 一 草 ， 介 绍 如 何 使 用 Ext JS 创建 WordPress 主题 。 
本 书 适合 Ext JS 开发 人 员 ， 以 及 欲 进 一 步 提升 技能 开发 更 优秀 Web 应 用 的 开发 人 员 阅 读 参 考 。 
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译 者 _ 序 


任何 技术 的 发 展 都 伴 有 或 寄 或 贬 的 声音 ，Ext JS 也 不 可 避免 。 记 得 在 2007、2008 年 的 时 候 ， 
各 大 前 并 论坛 对 Ext JS 和 jQuery 的 争论 很 多 , 许多 人 部 希 望 目 己 钟 爱 的 技术 能 够 “一 统 江 湖 ”。 现 
在 回头 想 想 ， 码 农 对 技术 的 争论 永远 是 一 道 亮丽 的 风景 线 。 


当时 对 Ext JS 的 争论 主要 集中 在 两 点 上 : 一 是 Ext JS 很 酷 ， 开 发 效率 很 高 ，UI 效 果 拿 来 即 用 ， 
比 jQuery 方 便 ; 二 是 认为 Ext JS 太 “ 重 ”， 不 适合 互联 网 应 用 ， 还 是 jQuery 轻巧 。 时 至 今日 ， 这 两 
种 论调 已 不 多 见 , 开发 者 的 心态 及 认识 也 逐渐 回归 理性 。 是 的 , 每 种 技术 都 有 其 合适 的 应 用 场景 。 
“天 生 我 材 必 有 用 ”， 多 年 过 去 了， 这 两 种 技术 谁 也 没有 取代 谁 ， 愉 恰 相 反 ， 它 们 都 在 各 目的 道路 
上 上 发展 得 很 好 、 很 滋润 。 如 今 ，Ext JS 和 jQuery 都 已 延伸 到 了 移动 内， 相应 的 开发 者 规模 也 越 来 
越 庞大 ， 这 足以 让 我 感慨 万 千 。 


正如 Sencha.com 网 站 上 介绍 的 ，Ext JS 是 一 个 基于 JavaScript 的 企业 级 Web 应 用 开发 框架 ， 当 
前 最 新 版 本 是 4.2.x。 这 里 要 着 重 强调 一 点 : Ext JS 4 相对 于 之 前 的 版 本 变化 巨大 ， 而 且 是 核心 染 
构 级 的 改进 ， 包 括 类 系统 、MVC 应 用 以 构 、 泻 染 和 布局 等 多 方面 。 可 以 说 ，Ext JS 4 是 Ext JS 2 
之 后 又 一 个 里 程 碑 式 的 版 本 。 


《精通 ExtJS》 是 一 本 比较 独特 的 书 ， 它 没有 机 械 地 罗列 ExtJS 各 个 组 件 。 同 时 ， 它 也 不 是 一 
本 有 关 ExtJS 的 人 门 书籍 ( 但 我 觉得 门槛 并 不 高 ) 全 程 通过 一 个 完整 的 例子 ， 按 开发 流程 递 进 式 
讲解 相应 知识 点 ， 其 间 穿插 着 大 量 最 佳 实践 。 我 认为 这 是 本 书 最 大 的 亮点 。 毫 无 疑问 ,本 书 跟 动 
不 动 就 罗列 一 大 堆 API 的 书 划 清 了 界限 。 我 更 喜欢 这 本 书 。 

翻译 完毕 ， 书 中 错误 难免 ,心里 感觉 志 亚 ,还 请 各 位 读者 适度 拍 砖 。 但 能 遇 到 一 本 好 书 ， 又 
是 件 高 兴 的 事情 。 翻 译 过 程 中 ， 承 蒙 图 灵 编 辑 李 松 峰 、 朱 出 、 毛 倩 倩 、 张 庆 ， 以 及 业内 同行 贾 洪 
妖 、 许 晓 滤 、 陈 害 杰 等 各 位 老师 的 无 私 指导 ， 在 此 特 致谢 意 | 
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欢迎 读者 访问 www.packtpub.com 下 载 支 持 文件 及 其 他 相关 资源 。 

Packt 为 所 有 已 出 版 图 书 提供 电子 版 (PDF 和 ePub 文 件 )。 你 可 以 在 www.packtpub.com 上 升级 
电子 书 ， 且 纸 质 书 的 用 户 有 权 享 受 购 买 其 电子 版 的 折扣 。 要 了 解 更 多 信息 ， 请 发 邮件 到 
Servlice(Opacktpub.com 。 

在 www.packtpub.com 还 可 以 阅读 免费 的 技术 文章 , 通过 注册 收取 一 系列 最 新 促销 信息 ,并 获 
得 Packt 纸 质 书 及 电子 书 的 独家 折扣 或 享受 特价 购书 。 


PACKT : 


http://PacktLib.PacktPub.com 
你 是 否 经 党 有 党 到 一 些 IT 难 题 的 困扰 ? PacktLib 是 Packt 的 在 线 数字 图 书馆 。 在 这 里 ,你 可 以 访 
问 、 阅 读 和 搜索 整个 Packt 图 书馆 里 的 图 书 。 


为 什么 订阅 


口 可 以 搜索 Packt 出 版 的 所 有 了 图书; 
口 可 以 复制 、 精 贴 、 打 印 内 容 并 在 内 容 上 添加 书签 ，; 
口 可 以 通过 浏览 右 实 现 按 需 访问 。 


Packt 注册 用 户 大 礼 


在 www.packtpub.com 上 注册 一 个 Packt 账 喜 ， 束 可 以 立即 访问 PacktLib 并 目 由 浏览 9 本 网 书 。 
注册 一 登录 一 浏览 ， 束 这 么 简单 。 


拉 术 审 校 


Aafrin 是 一 位 目 学 成 才 的 程序 员 ， 具 有 网 络 安全 及 数字 取证 方面 的 专业 至 景 。 他 从 2003 年 起 
一 直 从 事 Web 应 用 程序 的 设计 和 开发 工作 , 使 用 过 C++、Java、PHP、ASP、VB 、VB.NET 等 多 种 
编程 语言 ， 以 及 Ext JS 、CakePHP 、CodeIsgniter 、Yii 等 框架 。 业 余 时 间 ， 他 在 www.aafrin.com 上 写 
博客 ， 并 从 事 计 算 机 安全 /计算 机 取证 领域 的 研究 。 


Vincenzo Ampolo 在 意大利 米兰 理工 大 学 获得 了 计算 机 系统 工程 硕士 学 位 ， 并 有 六 年 多 的 上 自 
由 职业 者 经 历 。9 岁 时 ,他 就 对 技术 产生 了 浓厚 兴趣 ， 并 在 那 年 组 绽 了 第 一 台 属 于 目 己 的 计算 机 。 
他 12 岁 时 学 习 了 BASIC，15 岁 时 已 经 掌握 了 C， 之 后 义学 习 了 了 Python 和 JavaScript。 他 是 上 自由 软件 
传播 者 ， 并 且 从 14 岁 就 开始 使 用 GNU/Linux。17 岁 时 ， 他 开发 了 第 一 个 Linux 用 户 模式 启动 界面 。 
一 年 前 他 来 到 了 硅谷 。 

他 还 是 个 热心 人 ， 他 相信 软件 社区 的 力量 ， 并 帮助 组 织 了 许多 FOSS ( Free and Open Source 
Software， 目 由 软件 和 开源 软件 ) 相关 的 会 议 ， 如 Linux day 和 Ubuntu release party。 


献 给 所 有 相信 我 的 人 。 


Yiyu Jia 从 1996 年 就 致力 于 开发 Web 应 用 。 他 参与 了 很 多 以 Java 和 PHP 为 后 台 语 言 的 项 目 , 在 
其 中 担任 技术 主管 和 系统 架构 师 。 同 时, 他 还 有 互动 电视 、 中 间 件 和 家 庭 网 关 等 方面 的 工作 经 验 。 
他 对 跨 平 台 Web 应 用 的 设计 尤其 感 兴趣 。 

同时 他 还 是 新 的 数据 挖 气 研 究 诬 题 一 一 增进 式 子 空间 挖 气 ( Promotional Subspace Mining， 
PSM ) 的 主要 创始 人 , 该 技术 的 目标 是 在 巨大 数据 集 的 子 空间 中 发 据 有 用 信息 。 他 现在 从 事 大 数 
据 技 术 人 研究 。 

你 可 以 通过 他 的 博客 和 网 站 找到 他 : http://yiyujia.blogspot.com 及 http://www.idatamining.org。 

Joel Watson 是 一 名 Web 爱 好 者 ， 在 过 去 的 八 年 里 一 直 从 事 网 站 设计 和 开发 的 工作 。 他 喜欢 
人 研究 各 种 各 样 的 Web 技 术 ， 并 特别 喜欢 利用 HTML5 及 相关 技术 的 最 新 特性 来 创建 具有 很 棒 Web 
体验 的 应 用 。 

不 写 代 人 码 的 时 候 ，Joel 豆 欢 跟 他 的 妻子 和 两 个 女儿 竺 在 一 起 ， 弹 吉他 或 者 看 精彩 的 科 弘 片 和 
动画 厂 。 
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作为 Ext JS 开发 人 员 ， 你 很 可 能 已 经 花费 了 一 些 时 间 来 学 习 这 个 框 漆 。 我 们 都 知道 ，Ext JS 
并 非 是 一 朝 一 夕 就 可 以 擎 握 的 。 学 会 Ext JS 的 基本 应 用 后 ， 我 们 需要 在 日 常 开发 中 使 用 它 ， 此 时 
大 量 问 题 也 就 冒 了 出 来 。 两 个 组 件 间 如 何 通 信 ? 最 佳 做 法 是 什么 ?为 什么 选择 这 种 方式 , 而 不 是 
其 他 方式 ?是 否 还 有 实现 同一 种 特性 的 其 他 方式 ?这 都 是 普遍 存在 的 问题 。 


本 书 站 在 开发 者 的 角度 思考 问题 : 如 何 融合 各 种 思路 ， 通 过 Ext JS 创建 绝妙 的 应 用 呢 ? 


这 正 是 本 书 要 讲解 的 内 容 。 我 们 将 经 历 从 界面 原型 到 产品 化 构造 的 各 个 阶段 , 最终 实 现 一 个 
完整 的 应 用 程序 。 作 者 将 此 我 们 构建 应 用 结构 、 局 动 界 面 、 登 录 界 面 、 多 语言 文 持 功能 、 行 为 监 
控 功 能 、 取 决 于 用 户 权限 的 动态 菜单 ， 以 及 (简单 或 复杂 的 ) 数据 库 信 息 管 理 模 块 。 之 后 ， 我 们 
还 将 学 习 产 品 构造 方法 、 如 何 将 Web 应 用 转换 成 原生 果 面 应 用 ， 以 及 怎样 调试 、 测 试 它 。 本 书后 
面 还 专 设 一 草 ， 介 绍 如 何 使 用 Ext JS 创建 WordPress 主 题 。 


本 书 将 使 用 实际 示例 ， 并 讲解 怎样 用 Ext JS 组 件 来 实现 它们 。 我 们 还 将 给 出 大 量 提 示 、 选 择 
具体 做 法 的 原因 与 依据 ， 以 及 各 种 最 佳 实践 ， 带 助 大 家 把 Ext JS 技能 提升 到 一 个 新 的 高 度 。 


本 书 内 容 


第 1 章 介绍 本 书 实现 的 应 用 示例 及 其 特性 、 每 个 界面 和 模块 的 原型 ( 后 续 每 一 章 介绍 一 个 模 
块 )， 并 讨论 了 如 何 用 MVC 架 构 的 思路 创建 Ext JS 应 用 程序 ， 以 及 如 何 创建 启动 界面 。 

第 2 章 讨论 如 何 使 用 ExtJS 实 现 登录 界面 , 以 及 怎样 在 服务 器 端 做 相应 处 理 ,还 将 介绍 各 种 增 
强 功能 的 实现 ; 大 写 键 提醒 、 回 车 键 提交 表单 和 密码 发 送 到 服务 器 端 之 前 对 其 进行 加 密 。 

第 3 章 介绍 注销 、 客 户 端 行为 超时 监控 ( 如 果 用 户 一 段 时 间 内 未 使 用 鼠标 或 键盘 ， 系 统 将 自 
动 终止 会 话 并 注销 ) 等 功能 。 这 一 章 还 将 介绍 多 语言 支持 ， 并 为 此 创建 一 个 更 改 系统 语言 和 本 地 
化 设置 的 组 件 。 

第 4 章 创 建 一 个 取决 于 用 户 权限 的 动态 菜单 根据 用 户 权限 情况 来 决定 菜单 项 如 何 泻 染 呈现 ， 
如 果 用 户 权限 不 足 ， 就 不 会 显示 菜单 项 。 


第 5 章 讨论 用 户 管理 与 安全 ， 将 创建 两 个 功能 界面 : 列 出 所 有 系统 用 户 的 操作 界面 ， 以 及 添 
加 /编辑 用 户 、 删 除 现 有 用 户 和 更 改 用 户 权 限 的 操作 界面 。 


第 6 曹 实现 用 户 编 辑 数 据 库 表 信 息 的 模块 ， 其 界面 看 起 来 与 MySQL 数 据 库 表 编 辑 需 很 相似 。 
同时 还 将 介绍 即席 搜索 、 过 滤 、 行 内 编辑 (使 用 单元 格 编辑 插件 ) 等 。 这 一 章 也 将 讨论 实际 开发 
Ext JS 大 型 应 用 程序 时 的 一 些 话题 ， 如 组 件 重 用 。 

第 7 章 进 一 步 探 讨 数据 库 表 信息 管理 以 及 表 与 表 之 间 的 关联 ， 内 容 涉及 管理 复杂 信息 、 处 理 
数据 网 格 与 表单 面板 间 的 关系 。 

第 8 章 介绍 (Ext JS 原 生 不 支持 的 ) 打印 、 导 出 PDF 和 Excel 等 功能 ， 还 将 介绍 图 表 和 将 其 导 
出 成 图 片 和 PDF 格式 的 方法 ， 以 及 怎样 使 用 第 三 方 插件 。 

第 9 章 会 实现 一 个 与 微软 Outlook 非 常 相 似 的 电子 邮件 客户 端 界 面 ， 但 只 讨论 用 Ext JS 创建 相 
应 界面 ， 不 涉及 使 用 邮件 功能 库 收发 邮件 。 

第 10 草 简单 地 介绍 Ext JS 4.2 目 定义 主题 ， 并 讨论 产品 构造 的 步骤 和 好 处 ， 以 及 如 何 通过 
Sencha Desktop Packager 创 建 Ext JS 原生 桌面 应 用 。 

第 11 章 与 本 书 其 他 各 章 的 主线 内 容 不 同 ， 讨 论 如何 通 过 Ext JS 创建 WordPress 主 题 ， 探 讨 的 是 
Ext JS 的 不 同 应 用 场景 。 

第 12 章 讨论 调试 Ext JS 应 用 程序 、 注 意 事项 以 及 掌握 调试 方法 的 重要 性 。 这 一 章 还 将 简单 介 
绍 用 于 测试 Ext JS 应 用 程序 的 Siesta 框 架 ， 以 及 转换 Ext JS 应 用 为 移动 应 用 的 思路 。 最 后 ， 还 将 推 
荐 一 些 便于 日 第 开发 任务 的 有 用 工具 , 并 告诉 你 去 哪儿 寻找 可 在 ExtJS 项 目 中 使 用 的 第 三 方 插件 。 


阅读 须知 
以 下 是 运行 本 书 示例 需 预 装 的 软件 ， 当 然 你 也 可 以 使 用 已 经 安装 的 同类 软件 。 


市 有 调试 工具 的 浏览 三 : 


口 Firefox 及 Firebug https://www.mozilla.org/firefox/ 和 和 http://getfirebug.com/ 
DQ Chrome http:/www.google.com/chrome 


PHP Web 服 务 硕 软件 : 
DD XAMPP http:/www.apachefriends.org/en/xampp.html 
数据 库 : 


口 MySQL http://dev.mysql.com/downloads/mysql/ 


到 
wk 
UL 


DD MySQL Workbench http://dev.mysql.com/downloads/tools/workbench/ 
口 MySQL Sakila 样 例 数 据 库 http://dev.mysql.com/doc/index-other.html 和 http://dev.mysql.com 
/doc/sakila/en/index.html 


Sencha Command 及 其 他 工具 . 


DQ Sencha Command http:/www.sencha.com/products/sencha-cmd/download 

DQ Ruby http://www.ruby-lang.org/en/downloads/ 

DQ Sass http://sass-lang.com/ 

DQ Compass http:/compass-style.org/ 

DQ Java JDK http://www.oracle.com/technetwork/jJava/Javase/downloads/index.html 

口 Java 环 境 变 量 设置 http:/docs.oracle.comyjavase/tutorial/essentialenvironment/paths.html 


DQ Ext JS http://www.sencha.com/products/ext]s/ 
本 书 使 用 Ext JS 4.2。 


读者 对 象 


本 书 适合 Ext JS 专业 开发 人 员 ， 以 及 那些 想 进一步 提升 技能 以 开发 出 更 优秀 Web 应 用 的 开发 
人 员 。 本 书 并 不 讲述 Ext JS 基础 知识 。 


排版 约定 
为 方便 读者 阅读 ， 本 书 对 不 同 信息 采用 不 同样 式 。 接 下 来 ,我们 来 看 样式 的 示例 和 解释 。 
正文 中 提 到 的 代码 格式 如 下 所 示 :“ 我 们 将 为 加 载 的 DIV 标 签 添加 新 的 CSS 样 式 。” 
代码 段 样式 如 下 : 


Ext.application({ // #1 
name: 'Packt', // #2 
launch: function() { // #3 
console.log('launch'); // #4 


} 
}); 


当 需 要 读者 特别 注意 代码 块 中 的 某 一 部 分 时 ， 相 关 代码 行 或 项 将 以 粗 体 表示 : 


controllers: | 


'Login', 
'TranslationManager', 
'Menu' 


一 一 


已 


人 
= 


命令 行 输入 与 输出 样式 如 下 : 
sencha generate theme masteringextjs-theme 


新 术语 及 重要 词汇 将 采用 楷体 字 。 


| 警告 或 重要 说 明 将 写 在 这 里 。 | 
小 贴 士 和 技巧 将 写 在 这 里 。 


污 者 反馈 

我 们 时 刻 欢 迎 你 的 反馈 ， 以 便 了 解 你 对 本 书 的 看 法 。 你 的 宝 吐 意见 有 助 于 我 们 提升 书籍 的 
质量 。 

一 般 的 阅读 反馈 ,可 直接 发 送 电 子 邮 件 至 feedback@packtpub.com, 请 在 邮件 标题 中 注 明 书 名 。 


如 果 你 在 某 个 领域 内 有 专长 且 有 兴趣 编写 相关 书籍 ， 请 访问 www.packtpub.com/authors 查 看 
作者 指南 。 


客 亡 文 持 
现在 你 已 是 Packt 图 书 的 尊贵 读者 了 ， 我 们 有 一 系列 的 售后 支持 ， 保 证 你 的 消费 物 有 所 值 。 


代码 下 载 


访问 下 面 的 网 址 获取 本 书 示 例 的 源 代码 : https://github.com/loiane/masteringextjs。 


勘误 

尽管 我 们 已 经 对 书籍 作 了 仔细 校对 以 保证 内 容 准确 , 但 错误 在 所 难免 。 如果 在 书 中 发 现任 何 
的 文学 或 代码 错误 ,非常 欢迎 你 将 这 些 错 误 提 交 给 我 们 , 这 样 可 以 帮助 我 们 在 后 续 版 本 中 改正 错 
误 ， 避 免 其 他 读者 产生 不 必要 的 误解 。 一 旦 发 现 错误 ， 请 登录 http:/www.packtpub.com/support， 


Q 中 文 版 读者 可 免费 注册 iTuring.cn 在 本 书页 面 (~/book/1189 ) 提交 勘误 。 一 一 编者 注 


和 


前 言 5 


选择 书 名 ， 点 击 errata submission form ( 提交 勘误 ) 链接 ， 然 后 填写 具体 的 错误 信息 即 可 。 只 要 
你 提交 的 勘误 通过 验证 ， 勘 误 信 息 就 会 上 传 到 我 们 的 网 站 , 或 者 追加 到 已 有 勘误 列表 中 ， 显示 在 
该 书 的 勘误 页 面 。 


盗版 


对 所 有 媒体 来 说 ， 互 联网 盗版 都 是 一 个 环 手 的 问题 。Packt 很 重视 版 权 保护 。 如 打 你 在 互联 
网 上 发 现 我 们 公司 出 版 物 的 任何 非法 复制 品 , 请 及 时 告知 我 们 相关 网 址 或 网 站 名 称 ， 以 便 我 们 采 
取 补 救 措 施 。 


如 果 发 现 可 疑 盗 版 材料 ， 请 通过 copyright@packtpub.com 联 系 我 们 。 
对 你 帮助 我 们 保护 作者 权益 、 确 保 我 们 持续 提供 高 品质 图 书 的 行为 表示 敬意 。 


其 他 
如 果 你 对 本 书 有 任何 问题 ， 请 通过 questions@packtpub.com 联 系 我 们 ， 我 们 会 尽力 解决 。 


致谢 


感谢 父母 给 我 的 教育 、 指 导 和 建议 , 在 我 的 成 长 岁月 里 ， 帮 助 我 成 为 一 位 优秀 的 专业 技术 人 
员 。 尤 其 要 感谢 我 的 丈夫 ,感谢 你 的 耐心 、 文 持 以 及 对 我 的 葛 大 训 励 。 同 时 ,非常 感谢 我 的 朋友 
以 及 一 直 文 持 我 的 谈 者 。 
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Ext JS 是 知名 的 路 浏览 锅 RIA (Rich Internet Application， 宣 因特网 应 用 ) 框架 ， 用 来 创建 丰 
富 且 用 户 友 好 的 Web 前 端 界面 。 通 过 研究 ExtJS SDK 里 的 示例 ， 你 能 够 知晓 如 何 使 用 Grid、Tree、 
Form 和 Chart 等 组 件 ， 以 及 MVC (Model-View-Controller ， 模 型 - 视 风 -控制 磊 ) 架构 。 但 这 些 示 
例 大 多 数 都 是 彼此 无 关 的 ， 因 此 很 难 把 它们 集成 到 一 个 应 用 里 。 此 外 , 在 开发 应 用 时 ， 某 些 情 况 
站 通常 可 以 重用 大 量 代 码 ， 从 而 使 代码 易于 维护 。 


在 本 书 中 ， 我 们 将 畅游 Sencha ExtJS 的 世界 ， 并 研究 实际 和 案例， 开发 一 个 完整 的 应 用 ， 从 无 
到 有 ， 从 原型 阶段 下 至 产品 部 署 。 


本 章 将 介绍 要 开发 的 应 用 , 学 习 如 何 组 织 将 在 各 曹 创 建 的 应 用 文件 。 同 时 , 本 童 也 会 展示 应 
用 原型 ( mockup )， 曾 述 如 何 开 始 组 织 界面 ( 这 一 点 很 重要 ,但 一 些 开 发 者 和 常 弟 忘记 组 织 界面 )。 


口 安装 所 需 软 件 ; 

口 展示 应 用 及 其 功能 ; 

口 创建 每 个 界面 的 原型 ; 

口 用 MVC 方 式 创 建 应 用 的 结构 ; 
口 创建 加 载 页 面 。 


1.1 ” 安 六 所 需 软 件 


我 们 要 开发 的 应 用 有 一 个 比较 简单 的 染 构 ,前端 采 用 Ext JS， 它 与 服务 侣 问 柑 块 通信 ， 服 务 
名 细 模 块 与 数据 库 通 信 ， 整 体 染 构 如 下 图 所 示 。 


服务 器 端 模 块 的 构建 使 用 PHP。 如 果 你 不 懂 PHP 也 不 必 太 担心 ， 因 为 我 们 只 用 非常 简单 的 代 
人 码 ， 而 且 重 点 关注 必须 在 服务 需 端 实现 的 逻辑 。 同 样 的 逻辑 也 可 以 用 其 他 提供 JSON 或 XML 数据 
的 编程 语言 来 实现 ， 比 如 Java、ASPNET、Ruby、Python， 等 等 。Ext JS 使 用 JSON 或 XML 作为 数 
据 通 信 格 式 。 


数据 库 选 用 MySQL。 同 时 ， 使 用 Sakila 样 例 数据 库 ， 合用 来 演示 数据 库 表 的 CRUD 
( Create-Read-Update-Delete/Destroy， 创 建 - 读 取 - 更 新 -删除 /销毁 ) 操作 以 及 其 他 复杂 操作 ， 比 如 
视图 和 存储 过 程 〈 后续 将 学 习 怎 样 结合 Ext JS 做 这 些 处 理 四 


应 用 实现 之 后 ， 我 们 还 需要 定制 主题 ， 因 此， 需要 安装 Ruby、Sass 和 Compass 的 gem 包 。 为 
外 ,定制 主题 、 构 建 系统 也 需要 安装 Sencha Command。 为 了 保证 Sencha Command 能 够 正确 工作 ， 
我 们 还 需要 安装 并 设置 Java SDK。 


部 署 应 用 需要 Web 服 务 需 软件 。 如 果 你 的 电脑 里 没有 安装 Web 服 务 需 软件 ， 也 不 用 担心 ， 本 
书 将 使 用 XAMPP 作 为 Web 服 务 器 


运行 应 用 需要 浏览 侣 ， 推 荐 Firefox( 同时 安装 Firebug 插 件 ) 或 Google Chrome。 


在 开始 充满 乐趣 的 实际 操作 之 前 , 我 们 总 结 一 下 需要 安 痛 的 工具 。 以 下 列 出 了 下 载 地 址 , 并 
且 可 找到 安 竣 说明。 


口 带 有 调试 工具 的 浏览 


nm Firefox with Firebug https:/www.mozilla.org/firefox/ 和 {和 http://getfirebug.com/ 


@ Google Chrome www.google.com/chrome 
口 Web 服 务 帝 软件 


m XAMPP http:/www.apachetfriends.org/en/xampp.html 
口 数据 库 


四 MySQL http://dev.mysqgl.com/downloads/mysqgl/ 
四 MySQL Workbench http://dev.mysgl.com/downloads/tools/workbench/ 


口 MySQL Sakila 样 例 数 据 库 http://dev.mysql.com/doc/index-other.html 和 http:/devmysqlcomy 
doc/sakila/en/index.html 
口 Sencha Command 及 其 他 所 需 工 具 


m Sencha Command http:/www.sencha.com/products/sencha-cmd/download 
m Ruby http:/www.ruby-lang.org/en/downloads/ 
@m Sass http://sass-lang.com/ 


@m Compass http:/compass-style.org/ 
m Java JDK http://www.oracle.com/technetwork/java/Javase/downloads/index.html 


上 


四 Java 环 境 变 量 设置 http:/docs.oracle.comyjavase/tutorial/essentialenvironment/paths.html 


当然 还 有 Ext JS: http://www.sencha.com/products/extjs/， 本 书 使 用 Ext JS 4.2 版 本 。 


1.2 展示 应 用 及 其 功能 


本 书 要 开发 的 应 用 是 个 很 弟 见 的 Web 应 用 系统 ,你 以 前 大 概 经 常 磁 到。 我们 将 实现 一 个 视频 
商店 管理 程序 ( 这 也 是 我 们 使 用 Sakila 样 例 数据 库 的 原因 )， 其 典型 功能 包括 安全 管理 ( 管理 使 用 
者 及 其 权限 )， 演 员 、 影 片 、 库 存 和 租借 信息 管理 等 。 


Ext JS 将 帮助 我 们 实现 目标 ， 它 提供 了 深 之 的 组 件 ， 当 用 户 看 到 一 个 由 直观 是 友好 的 组 件 搭 
建 而 成 的 应 用 时 ， 会 感 党 眼 前 一 党 。 对 开发 者 而 言 ，Ext JS 提供 了 完整 的 解决 方案 ， 可 以 做 到 组 
件 重用 (减轻 工作 量 )， 同 时 还 有 一 套 完 整 的 数据 包 ， 使 得 与 服务 人 页 端 的 通信 以 及 信息 的 发 送 和 
获取 得 以 简化 。 


我 们 把 整个 应 用 划分 为 若干 模块 ,每 个 模块 负责 实现 应 用 的 某 些 功能 。 本 书 的 每 一 章 都 将 实 
现 其 中 的 一 个 异 块 。 


应 用 的 构成 如 下 : 

口 启动 界面 ( 应 用 启动 时 ， 用 户 看 到 的 就 不 是 空 日 界面 了 ); 
口 登录 异 面 ; 

口 主 界面 ; 


口 用 户 控制 管理 ; 

口 MySQL 数 据 库 表 管 理 ( 类别 与 组 合 框 ); 
口 内 容 管理 控制 ; 

口 电子 邮件 客户 端 模块 。 


对 于 上 面 提 到 的 每 个 模块 和 界面 ,我们 都 将 创建 原型 ， 以 便 规 划 应 用 如 何 工 作 。 比 如 ,是 否 
应 该 使 用 菜单 ， 点 击 菜 单项 之 后 出 现 的 内 容 应 该 展示 在 窗 体 中 、 屏 句 中 央 ， 还 是 标签 面板 里 ? 


1.2.1 局 动 界面 


初次 加 载 应 用 时 ， 加载 过 程 需要 花费 一 些 时 间 。 如 末 我 们 不 做 点 什么 , 用 户 就 会 看 到 一 个 空 
日 页 面 ， 这 显然 非常 无 趣 。 

因此 , 应 用 应 该 有 个 局 动 界 面 , 这 样 在 应 用 初始 化 前 加 载 所 需 文件 或 类 时 ,用 户 就 不 用 面 对 
无 趣 的 空 魏 页面 了 。 
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Loading application 


1.2.2 ”登录 界面 

应 用 加 和 载 完成 后 ， 用 户 见 到 的 第 一 个 界面 是 Login (登录 ) 界面 。 在 这 里 ， 用 户 能 够 输入 用 
户 名 (User Name ) 和 密码 ( Password )， 同 时 还 有 个 多 语言 组 合 框 供用 户 选 择 系统 语言 。 此 外 ， 
界面 中 还 有 Cancel (取消 ) 和 Submit (提交 ) 按钮 。 


uma [Eee 


E 国 


1.2.3” 主 界面 


通常 情况 下 ， 应 用 系统 都 会 用 边界 布局 (border layout ) 组 织 主 界面 。 在 中 央 区 域 ， 放 置 一 
个 标签 面板 ( tab panel )， 每 个 标签 页 表示 应 用 的 一 个 状态 界面 〈 每 个 界面 有 自己 的 布局 )， 只 有 
第 一 个 标签 页 〈 主 标签 页 ， 即 Home 页 ) 不 能 关闭 。 界 面 项 部 显示 应 用 名 Video Store Manager、 多 
语言 组 合 框 和 Logout 按 钮 。 界 面 底部 包含 版 权 信 息 ( 可 以 是 公司 名 字 或 者 项 目 开 发 者 名 字 )。 界 
面 左 侧 有 个 动态 采 单 ( 用户 管理 )， 采 单 用 折 车 面板 (accordion panel ) 来 实现 ( 每 个 模块 对 应 一 
个 面板 )， 每 个 面板 中 用 树 列 出 模块 的 菜单 项 。 


主 界面 原型 如 下 所 示 。 
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按照 我 们 最 初 描述 的 布局 分 区 ， 主 界面 的 布局 如 下 。 


Video Store 从 anager English vv Logout 


中 央 区 域 


1.2.4 ”用户 控制 管理 


在 用 户 控 制 管理 模块 ,使 用 者 需 创 建新 用 户 (New User )、 新 用 户 组 ( Groups )， 分 配 新 角色 
给 用 户 。 用 户 可 以 控制 系统 权限 ( 可 以 看 到 系统 的 各 柑 块 )。 


| 器 [i 
回 Group 1 
OO Group 2 


便 ) Brm 上 卫 


mr 


1.2.5 MySQL 数据 库 表 管理 


每 个 系统 都 有 管理 类 别 的 选项 Categories， 比 如 影片 类 别 、 影 片 语 言 ， 以 及 组 合 框 选 项 ， 等 
等 。 对 于 这 些 类 别 表 ， 需 要 提供 所 有 的 CRUD 选 项 和 筛选 选项 ， 以 下 所 示 的 模块 界面 与 MySQL 
Workbench 的 Edit table data ( 编辑 表 数 据 ) 选项 非常 相似 。 


Flier ic DA | id SE 
category_id name last. .update 
"he Action 2006-02-15... 
Anirmation 2006=02=15.,.. 
Children 2006=02=15,.. 
Classics 2006=02=15.,.. 
Comedy 2006-02=15... 
Documentary 2006=02=15.,.. 
Drama 2006-02=15,.. 
Family 2006=02=15,., 
Foreign 2006=02=15.,., 
Games 2006=02=15.,.. 
Horrar 2006-02=15... 
Music 2006=02=15.,.. 
New 2006=02=15.,.. 
SCi-Fi 2006=02=15,.. 
Sports 2006-02=15... 
Travel 2006=02=15.,.,, 


i 


Mpply Rewert 


[English 区] Looout 
Gime i _ 
"| IE 


口 creeoy 芭 ost Update 
Action [ee -O02-15 


Animation 2006-02-15 


Ehildrerm E906-02-15 


1.2.6 ”内 容 管 理 控制 


在 本 模块 , 用 户 可 以 查看 并 编辑 系统 核心 信息 。 在 本 模块 中 处 理 的 大 部 分 数据 库 表 痢 与 其 他 
表 关 联 ， 由 于 涉及 主 从 关系 ,信息 的 编辑 将 变 得 复杂 。 一般 情 况 下 ， 网 格 面板 用 于 呈现 信息 ， 而 
表单 面板 用 于 在 打开 的 窗 体 中 编辑 信息 。 
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模块 的 许多 界面 都 有 类 似 的 功能 ， 当 我 们 要 创建 具有 很 多 界面 的 应 用 时 ,要 牢记 一 点 : 做 好 Wi 
系统 设计 ， 尽 可 能 重用 代码 ， 以 便于 维护 、 添 加 系统 特性 和 功能 。 


Videe Stere Manager 


English | 村 | Logout 


加 Cell Content Cell Content 


口 Cell content 


加 Cell content 


Cell Conitent 


Cell Content Cell Conitent 


Cell Content Cell Content 


反击 New (新建 ) 或 Edit ( 编辑 ) 按钮 ， 将 打开 一 个 编辑 信息 新 窗 体 ， 如 下 图 所 示 。 


First Name: | -er Lnst Name: 


Zip Code: Country: 


加 cell Cantent 1 


人 Cell content 2 


(m) Cell content 3 


1.2.7 电子 邮件 客 尸 端 模块 


在 本 模块 中 , 我 们 将 使 用 ExtJS 设 计 一 个 电子 邮件 客户 端 。 这 很 重要 ， 因 为 这 表明 可 以 用 Ext 
JS 做 很 多 事情 ， 而 不 只 是 设计 CRUD 界 面 。 本 模块 将 实现 电子 邮件 客户 端的 界面 ， 但 不 实现 发 送 
和 接受 邮件 的 功能 〈 这 些 功 能 要 徘 服务 大 闯 代 码 来 实现 )。 


| [LL] |From Subject Date Size Attaeh 
加 Cell Centent 1 Cell Cnntent 1 OL/N1/2013 10 kh Y 


[DD ,cellcontent 2 Cell Content 1 O0172013 13MWMb YY 


[ Cell content 3 Cell Content 1 ULUI7zO13 IO0z b 


_| From: Someone 

-| Toe: me 
Sent: C1 Sanua"y 2013 
Subject: some contenl 


Lorem ipsum dolor sit amet, consecietur adipisicing elt, sed dc esmoc teTIP2r 
incididunt wu labore et dolore maanz alqua. Ut enim ad minim veniam, ouis nostrud 
exercitation ullameo laboris nisi ut diquip ex ea commodo consequat DJis au'e irure 
dolor in “eprehendert in voluptate vslit esse cillum dolore ec fugiat nulla pariatur: 
Excersteyr siNtoccaeca: cupidatat non prowent. sunt In culp3 qul otticla deserunt 
mollit anim id estlaborum. 


1.3 用 MVC 创建 应 用 框架 


让 我 们 开始 融 代 码 吧 。 第 一 件 事 就 是 用 MVC 架 构 创 建 应 用 。 我 们 可 以 利用 Sencha Command 
( Sencha Cmd ) 自动 创建 应 用 。Sencha Cmd 对 创建 应 用 很 有 帮助 ， 因 为 它 根据 MVC 架 构 创 建 应 用 
框架 ， 并且 提供 创建 产品 应 用 以 及 定制 主题 所 需 的 所 有 文件 ( 后续 章 节 会 介绍 具体 做 法 )。 


1.3.1 MVC 简 介 


MVC 是 Model-View-Controller 的 缩写 。 它 是 一 种 软件 架构 模式 ， 从 用 户 交 互信 息 中 分 离 出 呈 
现 部 分 。Model (模型 ) 表示 应 用 数据 ，View ( 视图 ) 表示 数据 输出 展示 ( 表单 、 表 格 、 图 表 等 )， 
Controller (控制 融 ) 控制 请 求 ， 将 其 转换 为 模型 或 视图 的 命令 。 


Ext JS 使 用 MVCS， 即 Model-View-Controller-Store( 模型 -视图 -控制 器 - 存 储 器 ) 模式 。 模 型 
表示 应 用 的 数据 ， 即 数据 库 表 。 视 图 表示 管理 模型 信息 的 所 有 组 件 和 界面 。Ext JS 受 事件 驱动 ， 当 
用 户 与 之 交互 时 , 视图 会 触发 事件 ， 控制 融 捕 提 这 些 事 件 , 然后 进行 处 理 , 重 定 问 命令 到 模型 (或 
存储 需 ) 或 者 视图 。 存 储 带 在 Ext JS 中 非常 类 侯 于 服务 需 端 稼 用 的 数据 访问 对 象 (Data Access 
Object，DAO ) 模式 "。 


举 一 个 简单 的 例子 。WidgetA 是 一 个 网 格 面板 ， 用 来 显示 数据 库 表 A 的 所 有 记录 ， 这 个 数据 
库 表 用 ModelA 来 表示 。 用 StoreA 表 示 获 取 的 信息 (从 服务 融 端 获取 的 ModelA 的 集合 )。 当 用 户 点 
击 WidgetA 上 的 一 条 记录 时 , 将 打开 一 个 窗口 (用 WidgetB 来 表示 ) 并 显示 数据 库 表 B 中 的 信息 (用 
ModelB 来 表示 ), 显然 ,StoreB 表 示 从 服务 副 并 获取 的 ModelB 的 集合 。 本 例 中 , 有 一 个 ControllerA 
捕捉 WidgetA 发 出 的 点 击 事件 ， 并 处 理 所 有 的 请 求 逻 辑 ， 从 而 显示 WidgetB 并 加 载 所 有 ModelB 的 


J DAO 数 据 访 问 对 象 模式 把 数据 访问 操作 和 业务 逻辑 分 开 。 一 一 译 者 注 
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言 息 ， 人 参见 下 图 。 


ControllerA references 
WidgetA, WidgetB 
StoreA, StoreB, 
ModelA, ModelB 


2-displays 
WidgetB 


1- WidgetA 
fires click event - . 
a 阳 /ACTiOS 


WidgetB 


StoreA 


939UaJajsJ 


StoreB 


aa505J3JjaJ 


1.3.2 ”创建 应 用 
在 xampp 目 录 下 的 htdocs 文 件 夹 里 创建 应 用 ， 其 名 为 masteringExtjs。 
在 继续 之 前 ， 先 看 看 htdocs 文 件 夹 。 


国 htdocs 
Ey = 准 *|| 亚 | 
FAVORITES Shared Folder 


SHARED 
bp | ext-4.2.0.663 


favicon.ico 


专 ] index.php 
b | xampp 


里 面 有 XAMPP 文 件 和 Ext JS 4.2 文 件 。 


下 一 步 就 是 利用 Sencha Cmd 为 我 们 创建 应 用 。 要 运行 Sencha Cmd， 得 先 打 开 操 作 系 统 自 种 
的 终端 工具 ， 即 Linux 和 Mac OS 用 户 打 开 终 端 窗口 ，Windows 用 户 打 开 命令 行 窗口 。 


操作 步骤 如 下 : 首先 进入 Ext JS 上 日 录 ( 本 例 中 为 htdocs/ext-4.2.0.663 )， 然 后 执行 以 下 命令 。 


sencha generate app Packt ../masteringextjs 
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ext-4.2.0.663 一 bash 一 S80%26 
loiane:= loianes$ cd rrApplications/XAMPP/xamppftiles/htdocsrext—d.2.8.663 


Loiancityt .2,8.6653 Loianc$ scneha gencrate app Pockt ,mostceringcwtjs 

sencha Cmd v3.2.8,256 

[LINF] 

[LINF]Y Enil—ptoyinn: 

[TNE] 

[INF] init—plugin: 

[INF] Inyoking plugin lrApplications/ XAMP /xampptiles/htdocs/ext—d.2.8.663,.5enc 
nadworkspace/p Liugin.xml) — supported targets: ~before-generate—-workspace 

[INF] 

[INF] ~before-generate~workspace: 

[INF] Inmvoking plugin (iApplications/XAM?P/ /aamppiiles/htdocs ext—d4, 2.0.063/, senc 
aworkspace/p udin. xml) 一 supported itarygets: generate-wo"kssace 

[LINF] 

[INF] cmd-—root-plugins init-properties: 

[LINE] 

[INF] init~-properties: 

[LINF] 

LINE] init-sentha-eommand: 

LINF] 

[INF] init: 

LINF] 

[INF] ~before-generate-workspace: 

[INF] 

[工人 IF generate-workssace-impl: 

LTNE] lacrhn] generating intn JApnliratinnsd WAMPP /ramnpnTtilea /htirrsiext—d.2. 


sencha generate app 命 今 令 在 htdocs 文 件 夹 中 创建 masteringextjs 目 录 ， 并 根据 MVC 架 构 所 
需 创 建文 件 结构 。Packt 是 应 用 系统 的 命名 空间 ， 意 味 痢 创建 的 每 个 类 都 将 以 Packt 打 头 ， 比 如 : 
Packt .model .Actor、 Pack.view.Login, 等 等 。 传递 给 该 命令 的 最 后 -个 参数 是 应 用 程序 

目录 ， 本 例 中 ， 就 是 htdocs 文 件 夹 下 的 masteringextjs 文 件 夹 。 


这 条 命令 执行 完毕 ， 结 果 如 下 图 所 示 : 


[a masteringextjs 
中 ee 要 7 


FAVOQRITES 


v ~ app 
外 app.js 
(| controller 
国 model 
| store 
I view 


-| app.json 


SHARED 


| bootstrap.css 


bootstrap.js 
] build.xml 
全 ext 
s index.htmil 
» Ml overrides 
bp Bl packages 
全 Readme.md 
| resources 
向 | sass 


为 什么 要 创建 这 样 一 个 项 目 结构 呢 ” 因 为 这 就 是 Ext JS MVC 应 用 要 使 用 的 结构 。 


若 想 了 解 更 多 关于 sencha generate appcommand 的 信息 ， 请 访问 http://docs. 


sencha.com/ext]js/4.2.0/#!/guide/command app。 
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下 面 ， 我 们 来 看 看 每 个 文件 夹 的 用 途 。 


首先 是 app 文 件 夹 ， 我 们 写 的 所 有 应 用 代码 都 放 在 里 面 。app 文 件 严 有 以 下 子 文件 夹 : 
controller 、model、store 和 view， 此 外 还 有 一 个 app.js 文 件 "。 接 下 来 逐个 介绍 。 


口 在 model 文 件 夹 里 创建 模型 文件 ， 模 型 为 拥有 一 组 字段 的 Ext JS 类 ， 代 表 应 用 管理 的 对 象 
( 演员、 地域 和 影片 )。 这 非 稼 类 似 于 一 个 用 来 表示 数据 库 表 的 服务 需 端 的 类 ， 只 有 属性 
及 对 应 的 获取 方法 ( getter ) 和 设置 方法 ( setter )。 

D store 文 件 夹 存放 存储 融 类 ,是 模型 集合 的 缓存 。 它 们 非常 类 似 于 数据 访问 对 象 ( Data Access 
Object， DAO ), 即 服务 顺 端 语言 ( 如 PHP ) 用 于 对 数据 库 执行 CRUD 操 作 的 类 。 因 为 Ext JS 
不 具备 跟 数 据 库 直接 通信 的 能 力 ， 存 储 震 类 通过 代理 与 服务 大 问 或 本 地 存储 通信 (存储 
硕 类 用 代理 进行 模型 数据 的 加 载 和 保存 )。 

口 view 文 件 夹 存 放 视 图 类 ， 即 通常 所 说 的 UI 组 件 ( User Interface Components， 用 户 界 面 
组 件 )， 如 网 格 面板 、 树 形 面 板 、Menu、 表 单 面 板 、Window， 等 等 。 视 岁 类 只 处 理 界 
面 呈 现 ， 不 处 理 组 件 的 事件 触发 (Grid、Tree、Menu、Form 、Window 都 是 Component 
的 子 类 )。 

口 最 后 ，controller 文 件 夹 存放 控制 右 类 , 控制 右 类 处 理 组 件 的 事件 触发 (事件 触发 源 于 组 件 
的 生命 周期 ， 或 者 用 户 与 组 件 的 交互 )。 要 牢记 Ext JS 是 事件 驱动 的 ， 我 们 在 控制 硕 类 中 
控制 事件 ， 并 在 必要 时 修改 模型 、 视 图 或 存储 器 。 


还 有 一 个 app.js 文 件 ， 它 是 应 用 的 入 口 ， 后 续 将 用 几 段 文字 来 描述 它 
回 到 masteringextjs 目 录 ， 里 面包 含 几 个 文件 和 目录 。 


D app.json Sencha Cmd 的 配置 文件 ， 打 开 它 会 发 现 里 面 只 有 一 个 与 应 用 ( Packt ) 同名 
的 JSON 对 象 。 

口 bootstrap.css 和 bootstrap.js 这 两 个 文件 都 是 Sencha Cmd 创 建 的 ， 不 要 修改 它们 。 
bootstrap.css 存 储 应 用 系统 使 用 主题 的 引用 ( 蓝 色 经 典 主题 ); bootstrap.js 则 存储 一 些 请 求 

和 令 ， 明 定义 的 xtype 属 性 以 及 一 些 元 数据 驱动 类 的 系统 特性 。 

口 build.xml Sencha Cmd 使 用 Apache Ant ( http://ant.apache.org/， 一 个 Java 项 目的 生成 工 
具 ),Ant 使 用 的 配置 文件 叫 build.xml, 包 含 了 生成 项 目 需 要 的 所 有 配置 和 命令 ,Sencha Cmd 
使 用 Ant 引 | 警 在 后 台 生 成 Ext JS 应 用 ( 只 需要 一 条 简单 的 命令 )。 这 也 就 是 为 什么 需要 安装 
Java SDK 以 使 用 Sencha Cmd 的 某 些 特性 。 

口 index.html 这 是 项 目的 首页 。 运 行 应 用 时 ， 浏 览 套 将 其 呈现 出 来 。 在 这 个 文件 里 ， 可 以 
看 到 bootstrap CSS 和 JS 文件 的 引用 ， 以 及 Ext JS 框架 文件 的 引用 ( ext/ext-dev.js 和 app/app.js 
村 

口 ext 这 个 文件 夹 存放 所 有 的 Ext JS 框 染 文 件 (xt-all、ext-all-debug、ext-dev ) 及 其 源 文件 。 


Q 翻译 本 书 时 ，Sencha Cmd 最 新 版 本 3.1.2.342，app.js 放 在 masteringextjs 目 录 下 。 一 一 译 者 注 


D overrides ”应 用 创建 伊始 ， 这 个 文件 夹 是 空 的 。 里 面 会 创建 一 些 Ext JS 重 写 代码 来 满足 
我 们 的 项 目 开 发 害 要 。 

口 packages 在 这 个 文件 夹 里 可 以 看 到 Sencha Cmd 管 理 的 所 有 包 。 关 于 包 的 更 多 信息 ， 请 
访问 : http://docs.sencha.com/extjs/4.2.0/#!/guide/command packages。 

口 resources 这 个 文件 夹 放置 创建 应 用 所 需 的 所 有 CSS 样 式 文件 〈 自 定义 样式 、 定 位 图 标 
的 CSS 等 )， 以 及 所 有 毅 态 文件 (图 片 )。 

D sass 在 这 个 文件 夹 里 ， 可 以 看 到 用 于 创建 主题 的 Sass 文 件 。 


下 面 ， 我 们 开始 动手 编码 吧 ! 
首先， 我 们 第 要 编辑 app.js 文 件 ， 其 原始 代码 如 下 : 


Ext .application(t 
name: 'Packt', 


views: [| 
'Main', 
'Viewport' 
] ; 


controllers: | 
'Main' 


] [A 


autoCreateViewport: true 


}); 

需要 将 其 修改 成 下 面 这 样 : 

Ext.application({ // #1 
name: 'Packt', // #2 


launch: function() { // #3 
console.log('launch'); // #4 
} 
}); 


上 面 代码 的 第 一 行 声 明了 一 个 Ext .application (#1 ), 表示 应 用 有 一 个 页 面 , 应 用 的 父 容 
需 为 Viewpoint。Viewpoint 是 一 个 特殊 的 容 肯 ， 表 示 应 用 的 可 视 区 域 ， 在 HITML 页 面 的 poqy 标 签 
里 演 染 ,决定 应 用 在 浏览 絮 中 的 显示 尺寸 及 窗 体 缩放 。 


在 Ext.application 中 ， 还 可 以 声明 应 用 使 用 的 模型 、 视 图 、 存 储 硕 以 及 控制 项 。 在 后 续 
创建 项 目 新 类 时 将 不 断 把 相关 信息 加 进去 。 


我 们 需要 声明 应 用 名 称 ， 并 作为 命名 空间 (可 )。 
我 们 还 可 以 在 Ext .application 里 创建 一 个 启动 (launch ) 困 数 ( 攀 )。 这 个 困 数 将 在 应 用 
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的 所 有 控制 可 初始 化 完成 后 被 调用 , 这 也 苇 味 着 应 用 完成 了 加 载 。 因 此 ,这 里 是 实例 化 主 视图 的 
合适 位 置 。 现 在 ,只 需 加 上 console. 1og 语 何 (#4 ), 就 可 以 在 浏览 套 的 JavaScript 解 释 需 控制 台 
打印 出 信息 ， 以 此 检验 应 用 是 否 加 载 成 功 。 


用 了 Ext.application， 还 需要 用 Ext.onReady 吗 ? 答案 是 不 需要 。 二 
者 只 用 一 个 即 可 。 根据 Ext JS API 文 档 描述 ， 当 所 有 所 需 脚 本 完全 加 载 ， 页 面 准 
备 就 绪 且 Ext .onReady 添 加 新 的 监听 器 并 执行 之 后 , Ext .application 才 会 加 
载 Ext .app.Application 类 并 用 所 给 的 配置 将 其 启动。 我 们 来 看 一 下 
Ext .application 的 源 代 码 : 


Ext.application = function(config) { 
Ext .require('Ext.app.Application'); 
Ext .onReady (function() { 


new Ext.app.Application (config).; 
}); 
上 
这 说 明 Ext .application 已 经 调用 了 Ext .onReady， 所 以 无 须 再 次 调用 。 
当 只 有 少量 组 件 要 显示 ， 且 未 使 用 MVC 架 构 时 ， 可 以 使 用 Ext .onReady (类 似 
于 jQuery 的 $(document) .ready() 函数 ); 当 开 发 一 个 ExtJSMVC 应 用 程序 时 ， 
可 以 使 用 Ext.application。 


通过 访问 http://localhost/masteringextjs， 可 以 在 浏览 絮 运 行 应 用 程序 ， 结 果 如 下 图 所 示 。 


S08 回 ] Mastering ExtJS x \ 这 


二 人 | | localhost/masteringextjs/ 


| 图 Hements 便 | Resources (®) Networ 和 


Launch app. is:29 
第 


加 )= & 后 <topframe>T <page context> 振 
> 


接 下 来 ， 我 们 准备 创建 应 用 。 
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1.4 创建 加 载 页 面 


大 型 的 Ext JS 应 用 系统 通 笛 在 加 载 时 会 有 短暂 的 延 时 ， 这 是 因为 Ext JS 需要 加 载 所 有 所 需 的 
类 以 保障 应 用 的 启动 和 运行 , 这 意味 着 此 时 用 户 会 看 到 一 个 空 晶 页面, 这 有 点 不 讨 人 喜欢 。 解 决 
这 个 问题 的 通用 方案 就 是 添加 一 个 加 载 页 面 ， 也 就 是 第 说 的 局 动 界 面 。 


所 以 ,需要 为 应 用 添加 一 个 如 下 图 所 示 的 局 动 界 面 。 


@eAe 团 Mastering Ext J5 


和 CC | | localhost/masteringextjs/ 


|PACKT| 


PUBLISHING 


Loading application 


站 和 完 , 我 们 需要 理解 局 动 界面 的 工作 原理 。 当 用 户 加 载 应 用 时 ， 加载 页 面 呈现 出 来 。 当 应 用 
加 载 全 部 所 需 的 类 以 及 代码 时 ， 则 呈现 局 动 界面 。 


我 们 已 经 知道 当 应 用 准备 就 绪 可 供 使 用 时 , 会 调用 启动 函数 。 所 以 , 启动 界面 的 实现 逻辑 不 
能 放 在 启动 函数 中 。 那 现在 的 问题 就 是 : 具体 在 Ext .application 的 何 处 可 以 调用 启动 界面 的 
实现 逻辑 呢 ?” 管 案 就 是 在 init 卫 数 里 。init 孙 数 在 应 用 程序 局 动 时 人 补 调 用 ， 所 以 给 所 震 代 码 的 
加 载 腾 出 了 一 定 的 时 间 ， 之 后 局 动 函 数 才 被 调用 。 


现在 我 们 了 解 了 局 动 界 面 的 工作 原理 ， 下 一 步 就 是 实现 它 。 


在 Ext .application 中 实现 init 困 数 : 


init: function() { 
splashscreen = Ext.getBody() .mask('Loading application', 
'splashscreen'); 


} 了 


我 们 要 做 的 就 是 在 HTML body 标 签 上 (Ext .getBody() ) 插入 一 个 遮 时 ,因此 要 调用 mask 
方法 ,传递 加 载 信息 (Loading Application )， 并 应 用 CSS 样 式 。 后 面 ， 还 将 加 载 一 个 gif 动画 (也 
是 Ext JS CSS 样式 splashscreen 里 的 一 部 分 )。mask 方 法 返回 Ext .dom.Element 对 象 ， 后 续 还 会 用 
到 它 〈 移 除 遮 罩 )。 因 此 ， 我 们 需要 保留 一 个 Ext .dom.Element 的 引用 ， 并 把 这 个 引用 保存 在 
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Ext .application 的 一 个 属性 里 : 


splashscreen: {}, 


现 有 init 方 法 的 代码 所 呈现 的 加 载 页 面 如 下 图 所 示 : 


ba 
@ 日 日 J 回 Mastering Ext JS x Wn -: 
be 色 | 门 localhost/masteringextjs/ | 二 


$Y Loading application 


如 果 这 是 你 需要 的 界面 ， 那 这 样 就 足够 了 。 但 让 我 们 再 更 进一步 , 通过 加 上 标志 ,让 它 看 起 
来 像 本 市 开头 的 图 示 那 样 ， 这 才 是 最 终 像 样 的 画面 。 

首先 , 在 resources 文 件 夹 下 的 css 子 文件 夹 中 创建 一 个 CSS 样 式 表 , 包含 应 用 的 所 有 样式 设置 ， 
并 将 其 命名 为 app .css: 


@ee 国 masteringextjs 


Ee EEE) >» 


FAVORITES Shared Folder 


SHARED 


mm 
LolanesTi.. | 7 国 app 


虽 app:js 
E [controller 
> Ml model 
= 天 store 
> | view 
5 app.json 


CG 


| bootstrap.css 
本] bootstrap.js 
build.xmml 
» 国 ext 

看 index.html 
» 国 overrides 
» | packages 

专 ] Readme.md 
MU 

VT 病 css 

重 app.css 

MA LEWD 

® packit=-|0g0.png 


» 而 | sass 


-大 


16 第 1 章 启程 


在 resources 文 件 夹 中 再 创建 一 个 images 文 件 来， 里 面 放 Packt 的 logo 图 片 。 
别 忘 了 在 indqex.html 里 加 入 新 的 CSS 文 件 引 用 。 


<link rel="stylesheet" href="resources/css/app.css"> 


app.css 文 件 包含 如 下 代码 : 


.X-mask.splashscreen { 
background-color: white; 


opacity: 1; 


.X-mask-msg.splashscreen, 
.X-mask-msg.splashscreen div ({ 
font-size: 16px; 
font-weight: bold; 
padding: 30px 5px Spx Spx; 
border: none; 
background-color: transparent; 
background-position: top center; 


.X-message-box .x-window-body .x-box-inner f{ 


min-height: 110px !important; 


.Xx-Splash-icon { 
background-image: url('../images/packt-logo.png') !important,; 
margin-top: -30px; 
margin-bottom: 15px; 
height: 100px; 
} 


现在 回 过 头 来 看 app.js 文 件 ， 继 续 在 init 函 数 里 添加 代码 。 
如 有 条 在 in 让 函数 现 有 代码 的 后 面 添 加 以 下 代码 : 


splashscreen.addCls('splashscreen'); 


将 添加 新 的 CSS 样 式 用 以 加 载 pIV 标 签 。 注 意 ， 此 时 应 用 的 是 app.css 文 件 里 的 .x-mask. 
splashscreen 和 和 .x-mask-msg.splashscreen div 样 式 。 这 将 导致 背景 由 灰 本 为 魏 色 ， 同 
时 ,“Loading Application” 的 字体 也 将 改变 。 


生成 的 HTML 代 码 如 下 : 
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| 总 | Hements | 前 |Resources (© Nework :地 Sources CY Timaline ( Profiles CA Audits | 可 console 


<IDOCTYPE html> 
v<html class="x-border-box x-strict"> 
= <head>..</head> 
Vv<body id="ext-geni0818" class="x-body x-webkit x-chrome x-macCc x-reset x-masked"> 
<div class="x-mask splashscreen" id="ext-geni028" style></div> 


v<div class="x-mask-msg splashscreen" id="ext-geni8i9" style="left: 550pX; top: 125px;"> 
<div>Loading application</div> 
</div> 
p<div class="x-tip x-layer x-tip-default"” id="ext-quicktips-tip" style="display: none;">..</div> 


</body> 
</html> 


现在 ， 在 init 果 数 里 加 入 以 下 代码 : 


Ext .DomHelper.insertFirst (Ext.query(' .x-mask-msg')[0], { 


cls: 'x-splash-icon,' 


}); 


此 行 代码 将 查找 第 一 个 包含 . x-mask-msg 类 ( Ext. query(' .x-mask-msg') ] ) YY 
标签 ， 然 后 添加 一 个 新 的 DIV 标签 作为 子 标签 , 样式 类 为 x-splash-icon,， AR 
添加 logo 图 片 。 


生成 的 HTML 代 码 如 下 : 
x | 区 Hements 画 |Resources © Network 区 Sources ($Y Timeline (Cs Profiles CA Audits [dd Console 


<!DOCTYPE html> 
v<html class="x-border-box x-strict"> 
b <head>..</head> 
v<body id="ext-gen1018" class="x-body x-webkit x~-chrome x-maCc x-reset x-masked"> 
<div class="x-mask" id="ext-geni028" style></div> 
v<div class="x-mask-msg splashscreen"” id="ext-geni0i9" style="left: 550px; top: i25px;"> 
<div>Loading application</div> 
</div> 
= <div class="x~-tip x-layer x-tip-defaylt"” id="ext-quicktips-tip" style="display: none;">..</div> 


</body> 
</html> 


执行 上 述 代 码 后 ， 将 得 到 本 节 开 头 所 展示 的 绪 
现在 已 经 实现 了 启动 界面 。 接 下 来 , 需要 在 局 动 函 数 中 移 除 启 动 界 面 ， 否则 ,加载 信息 将 一 


让 显示 。 
移 除 局 动 界面 的 代码 只 有 一 行 : 
Ext .getBody() .unmask () ; 


但 是 , 遮 党 消失 得 太 罕 然 并 不 好 , 因为 用 户 甚至 有 可 能 看 不 到 加 载 信 息 。 更 好 的 方案 是 在 应 
用 就 绪 后 留 2 秒 钟 给 用 户 ， 以 便 其 可 以 看 到 加 载 信息 。 


Var task = new Ext.util.DelayedTask (function() { // #1 
Ext.getBody() .unmask (); // #2 


}); 


task.delay (2000); // #3 


18 第 1 章 ”启程 


如 此 一 来 ， 我们 就 要 用 到 DelayedTask 类 (#1 )， 它 能 使 函数 在 过 了 设 定时 间 ( 友 ， 以 毫秒 
为 单位 ) 后 才 执 行 。 在 本 例 中 ， 两 秒 ( 2000 毫 秒 ) 过 后 遮 罩 才 会 消失 (# )。 


如 打 现 在 查看 输出 结果 ， 会 发 现 程序 能 够 正 带 运行 ， 但 对 用 户 而 言 仍 不 够 友好 ， 如 果 在 遮 单 
中 加 个 动画 会 更 好 。 现在 , 我 们 给 其 加 上 一 个 淡出 动画 (通过 动画 形式 , 把 元 系 的 透明 度 膛 源 提 高 ， 
使 其 由 不 透明 变 为 透明 )。 动 画 过 后 ， 仍 要 移 除 这 个 遮 赣 〈 在 Ext.util.DelayedTask 国 数 中 ) 


splashscreen.fadeOut ({ 
duration: 1000, 
remove:true 


下 
执行 完 这 段 代 码 后 ， 我 们 发 现 加 载 信息 仍然 显示 着 。 需 要 分 析 HIML 代 码 找 出 原因 。 


执行 Eadqeout 国 数 之 前 ， 加 载 信 息 的 HIML 代 码 如 下 图 所 示 : 


” | 六) Hements | 到 |Resources (© Nework (3 Sources CY Timaline 时 Profiles CA Audits | 司 console 


<IDOCTYPE html> 
<htmLt CLass="x-border-box x~-strict"> 
= <head>...</head> 
下 <body 1d='"rext~-gqen1l10918" class="x~body x-webkit x~chrome X=-mac x-reset X-hmasked'"> 
<div class="x-mask sp qen10628" style></div> 
v<div class="x-mask-msg splashscreen" id="ext-geni8i9" style="left: 550pX top: 125px;"> 


<div class="x-splash-icon"></div> 
<div>Loading application</div> 
</div> 
b<div class="x-tip x-layer x-tip-default"” id="ext-quicktips-tip" style="display: none;">..</div> 


</body> 
</html> 


执行 完 fadeout 阴 数 后 ，HTML 代 码 如 下 图 所 示 : 


2 | 这 | Hlements | 邯 ] Resources 人 Nework 由 Sources CY Timeline (ss Profiles CA Audits Console 


<1DOCTYPE html> 
v<html class="x-border-box x-strict"> 
= <head>...</head> 
<body id="ext-geni6i8" class="x-body x-webkit x-chrome x-mac x-reset x-masked"> 
v<div class="x-mask-msg splashscreen"” id="ext-geni08i9" style="left: 550px; top: 125px;"> 
<div class="x-splash-icon"></div> 
<div>Loading application</div> 
</div> 
b<div class="x-tip x-layer x-tip-default"” id="ext-quicktips-tip" style="display: none;">.</div> 


</body> 
</html> 


只 有 第 一 个 具备 splashscreen 样 式 类 的 DIV 标 签 产 生 了 淡出 效果 。 还 需要 具备 x-mask- 
msg splashscreen 样 式 、 包 含 logo 标 识 和 加 载 信息 的 DIV 标 签 也 产生 淡出 效果 。 
splashscreen.next() .fadeOut(t{ 
duration: 1000, 


remove:true 


})3 
这 样 一 来 ， 退 出 动画 看 起 来 就 舒服 了 。 请 注意 ， 此 时 具备 splashscreen 样 式 的 DIV 标签 已 
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经 从 HIML 代 码 中 移 除 了 


XK | 区 | Elements | 总 | Resources 人 Nework 0 Sources ($Y Timeline [SS Profiles A Audits [0 Console 


<1D0OCTYPE html> 
v<html class="x-border-box x-strict"> 
= <head>..</head> 
<body id="ext-geni018" class="x-body x-webkit x-chrome x-mac x~reset x-masked"> 
b<div class="x-tip x-layer x-tip-defaylt" id="ext-gyicktips-tip" style="display: none;">.</div> 


</body> 
</html> 


遮 章 被 移 除 后 ， 需 要 呈现 应 用 的 组 件 界 面 。 接 下 来 要 呈现 一 个 将 在 下 一 和 曹 实 现 的 登录 界面 。 
现在 ,我们 先 加 个 控制 台 信 息 (#1 )， 标 注 一 下 需要 在 什么 位 置 调用 组 件 处 理 逻 辑 ， 完 成 的 局 动 
限 数 的 代码 如 下 所 示 : 


launch: function() { 
var task = new Ext.util.DelayedTask (function() { 


splashscreen.fadeOut(t{ 
duration: 1000, 
remove:true 


}); 


splashscreen.next () .fadeOutl(t{ 
duration: 1000, 
remove:true 


上 


console.log('launch'); // #1 
}); 


task.delay (2000); 


于 显示 及 移 除 诞 单 的 代码 (方法 ) 都 是 Ext .dom.Element 类 的 一 部 分 。 
类 封装 了 at (Document Object Model，DOM ) 元 素 ， 可 以 用 类 
ee 些 元 素 。 这 个 类 属于 Ext JS 核心 库 ， 核 心 库 是 Ext JS 框架 的 基础 。 


1.5 小结 


本 草 介 绍 了 本 书 各 章 要 致力 于 实现 的 应 用 的 基本 情况 ， 以 及 搭建 应 用 开发 环境 所 需 的 工具 ， 
并 且 学 习 了 怎样 创建 一 个 基于 Ext JS MVC 框 架 的 应 用 ， 其 初始 结构 如 何 。 


此 外 ， 通 过 实例 ， 我 们 还 掌握 了 创建 启动 界面 (也 叫 加 载 界 面 ) 的 方法 ， 即 用 Ext .dom. 
Element 类 管理 DOM。 我 们 了 人 解 了 Ext. onReady Ext .application 的 区 别 ， 以 及 
Ext .abpplication 的 init 与 1aunch 方 法 的 不 同 。 下 一 章 ， 我 们 将 进一步 完善 app.js 文 件 以 显示 
应 用 的 第 一 个 界面 : 登录 界面 。 


登 孙 窜 面 


应 用 系统 通常 都 有 一 个 登录 界面 ， 可 以 通过 用 户 提 供 的 认证 信息 鉴别 、 验 证 用 户 ， 从 而 达到 
控制 系统 访问 的 日 的 。 一旦 用 户 登 录 ,， 系统 束 可 以 跟踪 用 户 的 行为 。 我 们 还 可 以 设置 应 用 系统 的 
一 些 特性 和 界面 的 访问 权限 ， 限 制 特定 用 户 或 菏 一 用 户 组 的 访问 。 


在 本 章 中 ， 我 们 将 介绍 以 下 内 容 : 


口 创建 登录 界面 ; 

口 在 服务 各 并 处 理 登 录 界 面 ; 

口 在 Password ( 密码 ) 学 段 添 加 大 与 键 提醒 ; 
口 按 回 车 键 提交 表单 的 功能 ; 

口 在 信息 发 送 给 服务 间 端 之 前 加 密 密 码 。 


2.1 登录 界面 
Login 窗 口 是 本 项 目 要 实现 的 第 一 个 视图 。 我 们 将 一 步 步 创建 它 ， 使 其 最 终 具备 以 下 功能 : 


口 用 户 通过 键入 用 户 名 和 密码 登录 系统 ; 

口 客户 端 验 证 (登录 时 必须 提供 用 户 名 和 密码 ); 
口 用 户 按 回 车 键 提交 Login 表 单 ; 

口 在 信息 发 送 给 服务 需 端 之 前 加 密 密 但 ; 

口 多 语言 支持 。 


除了 将 要 在 下 一 章 实 现 的 多 语言 文 持 功能 ， 其 余 功能 都 将 在 本 章 完 成 。 创 建 完 成 后 ，Login 
窗口 将 如 下 图 所 示 : 


Login x 
Lser: Iaiane 
Passwoard: 重量 本 
EE Erglish ™ (a Cancel 2 Submit 


让 我 们 开始 吧 ! 


2.2 创建 登录 界面 


在 app/view 目 录 下 , 创建 一 个 名 为 Login.js 的 新 文件 。 这 个 文件 将 包含 在 屏幕 上 创建 可 见 元 素 
的 所 有 代码 。 
在 Login.js 文 件 里 ， 写 出 如 下 代码 : 


Ext .define('Packt.view.Login', { // #1 
extend: 'Ext.window.Window', // #2 


alias: 'widget.1login', // #3 
autoShow: true, // #4 
height: 170, // #5 
width: 360, // #6 
layout: { 

type: 'fit' // #7 
J 
iconCls: 'key', // #8 
title: "Login", // #9 
closeAction: 'hide', // #10 
closable: false // #11 


}); 


第 一 行 (#1 ) 用 Ext .define 定 义 了 一 个 类 ， 其 后 紧 跟 一 对 圆 括号 ( () )， 在 圆 括号 内 首先 
声明 类 名 , 后 面 是 逗号 (，) 以 及 花 括 号 ({} ), 最 后 是 一 个 分 号 。 所 有 的 配置 参数 和 属性 (#2~#11 ) 
都 放 在 花 括号 内 。 


请 注意 类 名 , Sencha 对 ExtJS MVC 项 目的 建议 命名 规则 是 : 应 用 的 命名 空间 + 包 名 +JavaScript 
文件 名 。 上 一 章 , 我 们 定义 了 命名 空间 Packt ( 在 app.js 文 件 里 )。 同 时 ,我 们 还 创建 了 项 目的 视图 
结构 ， 因 此 创建 的 JavaScript 文 件 应 该 放 在 view 包 ( 目录 ) 中 。 这 里 的 JavaScript 文 件 名 是 Login.js， 
去 挥 .js，Login 就 是 视图 名 称 。 于 是 ， 我 们 的 类 名 就 是 Packt .view.Login。 

Login 类 继承 Window 类 (#2 )， 因 为 我 们 希望 登录 界面 在 一 个 窗 体 内 呈现 。 


我 们 还 分 配给 了 Login 类 一 个 别名 alias( 闪 ) 从 组 件 扩展 而 来 的 类 的 别名 总 是 以 widget. 
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打头 ,后面 跟 春 我 们 取 的 别名 。 别 名 的 命名 惯例 是 小 写 。 还 有 一 点 很 重要 : 别名 在 应 用 中 必须 是 
唯一 的 。 本 例 中 以 login 作 为 这 个 类 的 别名 ， 后面 就 可 以 用 别名 实例 化 这 个 类 了 ( 跟 使 用 xtype 
一 样 )。 举 个 例子 ， 可 以 用 四 种 不 同 的 方式 实例 化 Login 类 。 


口 用 类 的 全 称 ， 这 是 最 常用 的 方式 : 


Ext .create('Packt .view.Login'); 


口 在 Ext .create 方 法 中 使 用 别名 : 


Ext .create('widget.1login'); 

口 在 Ext .ClassManager.instantiateByAlias 的 快捷 方式 Ext .widget 中 使 用 别名 : 
Ext .widget ('login'); 

口 使 用 xtype 作 为 另 一 组 件 的 项 : 


items: | 
{ 
xtype: 'login,' 
} 
] 


本 书 大 多 数 情 况 下 用 第 一 种 、 第 三 种 和 第 四 种 方式 。 


接 下 来 ， 设置 autoShow ( 日 动 显 示 ) 为 true ( #4 ), 对 于 窗 体 而 = 仅 仪 实例 化 组 件 是 不 
足以 呈现 它 的 。 实 例 化 窗 体 后 , 我们 拥有 了 窗 体 的 引用 , 但 它 还 不 能 在 屏幕 上 呈现 出 来 。 如 果 想 
让 它 呈 现 出 来 , 就 还 需要 手动 调用 show () 方 法 。 男 一 个 让 它 呈 现 出 来 的 方式 是 将 autoshow 属 性 
设置 为 ctrue。 这 样 ， 当 窗 体 实例 化 后 就 会 自动 呈现 出 来 了 。 

同时 ,我 们 还 需 设置 窗 体 的 neight ( #5， 高度 ) 和 widtn (#6， 宽度 ), 设置 布局 类 型 为 fit 
(#7 )， 因 为 我 们 希望 登录 表单 ( 包含 用 户 名 和 密码 字段 ) 占据 整个 窗 体 。 但 要 注意 ， 用 了 fit 布 
局 就 可 以 只 设置 一 个 子 组 件 项 了 。 

设置 窗 体 的 ijconcls (#8 ) 属性 ， 就 可 以 为 窗 体 的 标题 栏 添加 “钥匙 ”图 标 。 还 可 以 设置 窗 
体 的 标题 ， 这 里 为 “Login”( #9 )。 下 面 这 行 代码 声明 了 :iconcls 属 性 用 到 的 “ 钥 是 ”图 标 样式 : 


.key { 
background-image:url('../icons/key.png') !important; 


} 
我 们 为 iconc1ls 创 建 的 所 有 样式 都 要 像 上 面 这 样 来 设置 。 
最 后 ， 我 们 设置 『 了 closeAction (#10) 和 closable (#11 ) 两 个 属性 。closeAction 设 


置 关 闭 窗 体 时 是 和 否 销 毁 窗 体 。 本 例 中 ， 我 们 并 不 想 销毁 窗 体 ， 而 只 想 隐藏 它 。closable 设 置 在 
窗 体 右 上 角 是 否 呈 现 关 闭 图 标 (一 个 又 )， 因 为 这 是 Login 窗 体 ， 所 以 没 必 要 呈现 。 
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如 有 果 你 愿意 ， 还 可 以 加 上 gdraggable 和 resizable 属 性 并 设置 为 false， 用 于 阻止 用 户 拖 
虫 、 缩 放 Login 窗 体 。 


截至 目前 ， 我 们 完成 了 一 个 左上 角 有 标题 Login 及 “ 钥 怀 ”图 标的 窗 体 : 


2 Login 


下 一 步 ， 我 们 添加 一 个 天 有 用 户 名 和 密码 字段 的 表单 。 把 以 下 代码 添加 到 Login 类 中 : 


items: | 
{ 
xtype: 'form', // #12 
frame: false, // #13 
bodyPadding: 15, // #14 
defaults: { // #15 
xtype: 'textfield', // #16 
anchor: '100%', // #17 
labelWidth: 60 // #18 
} > 
items: | 
{ 
name: 'uSer', 


fieldLabel: "User'" 


inputType: 'password', // #19 
name: 'password', 
fieldLabel: "Password" 


} 
] 


前 面 用 了 fit 徐 体 布 局 ， 那 就 只 需要 在 Login 类 中 声明 一 个 子 项 ( item )。 因 此 ， 我 们 添加 
一 个 表单 (#12 ) 并 打算 让 这 个 表单 看 起 来 更 漂亮 些 : 移 除 frame 属 性 (#13 ),， 设置 表单 的 填充 
属性 (#14 )。 表单 的 frame 属 性 默认 值 就 是 false, 但 如 果 我 们 不 明确 将 属性 设置 为 false 的 话 ， 
还 是 会 有 个 蓝 色 边框 出 现 。 


我 们 要 在 表单 上 诊 加 两 个 字段 ， 同 时 还 要 避免 代码 重复 。 这 也 是 为 什么 在 表单 的 defaults 
配置 项 里 设置 一 些 属性 的 原因 (#15 )。 这 里 的 设置 会 影响 表单 中 的 所 有 元 素 ,， 我 们 在 其 中 只 设置 
想 定 制 的 内 容 。 我 们 想 在 表单 中 声明 两 个 字段 ， 痢 是 textfield 类 型 ， 而 表单 默认 的 布局 是 
anchor， 因 此 不 需要 明确 声明 它 。 但 是 ， 我 们 希望 这 两 个 字段 在 水 平方 向 占据 表单 内 的 所 有 空 
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间 , 所 以 声明 anchor 属 性 为 100%( #17 )。 默认 情况 下 , TextField 标 签 (1abel ) 的 宽度 (width ) 
为 100 像 系 ， 这 对 用 户 名 和 密码 字段 来 说 太 长 了 ， 我 们 把 它 缩小 为 60 像 素 ( #18 )。 


最 后 ， 我 们 设置 了 user 和 passworaqa 了 两 个 文本 字段 ，name 属 性 用 来 在 提交 表单 到 服务 硕 端 
时 识别 相应 字段 。 还 剩 下 一 个 问题 : 当 用 户 在 密码 框 里 输入 密码 时 ， 系 统 不 能 显示 密码 明文 。 所 
以 ,我 们 将 password 字 上段 的 ijnputType 属 性 设置 为 'password' (#19 )。 这 样 ， 用 户 输 入 的 密 
但 就 会 显示 为 圆 点 ， 而 不 是 明文 了 。 


我 们 又 进一步 完善 了 Login 窗 体 ， 目 前 效果 如 下 图 所 示 : 


J Loginm 


User: 


PasswWword; 


2.2.1 ” 客 己 端 验证 


Ext JS 的 表单 字段 组 件 具 有 一 定 的 客户 端 验 证 能 力 ， 这 可 以 节省 我 们 的 时 间 和 寓 宽 (系统 只 
有 在 通过 基本 验证 之 后 才 会 发 起 服务 休 问 请 求 ) 此外， 客户 冰 验 证 还 能 指出 用 户 填 表单 时 哪儿 
出 了 错 。 当 然 ， 出 于 安全 原因 ， 仍 需要 服务 骨 问 验证 ， 但 就 现在 而 言 ， 我 们 主要 关注 Login 表 单 
的 客户 并 验证 。 


思考 一 下 用 户 名 和 密码 字段 的 验证 场景 。 


口 用 户 名 和 密码 是 必 填 项 ,但 怎样 验证 没有 用 户 名 和 密码 的 用 户 呢 ? 
口 在 两 个 字段 中 ， 用 户 只 能 输入 字母 和 数字 〈A~Z、a~z 以 及 0~9 )。 
口 用 户 名 字段 只 能 输入 3~25 个 字符 。 

口 密码 字段 也 只 能 输入 3~15 个 字符 。 


因此 ， 加 入 对 两 个 字段 痢 通 用 的 代码 : 


allowBlank: false, // #20 
vtype: 'alphanum', // #21 
minLength: 3, // #22 
msgTarget: 'under' // #23 


我 们 将 把 上 述 配 置 加 到 表单 的 defaults 属 性 配置 中 ， 这 些 配 置 将 同时 作用 于 用 户 名 和 密码 
字段 。 首 先 ， 两 个 字段 都 是 必 填 项 ( #20 )， 只 人 允许 输入 字母 和 数字 〈 雪 1 )， 用 户 至 少 要 输入 3 个 
字符 〈 壤 2 )。 然 后 是 最 后 一 个 通用 配置 : 在 字段 下 面 显 示 验 证 错误 信息 (#23 )。 


需要 目 定 义 的 是 User (用 户 名 ) 字段 最 大 字符 数 为 25: 
name: 'user', 


fieldLabel: "User", 
maxLength: 25 


Password ( 密码 ) 字段 最 大 字符 数 为 15: 


inputType: 'password', 
name: 'password', 
fieldLabel: "Password", 
maxLength: 15 


下 图 展示 了 应 用 客户 端 验 证 之 后 ， 用 户 填 写 Login 窗 体 出 错时 的 场景 : 


2 Login 


地 The maximum length for this field is 15 


如 果 你 不 喜欢 这 种 样式 ， 我 们 可 以 改变 出 错 信 息 的 显示 位 置 ， 只 和 宕 改变 msgTarget 属 性 值 
有 6]。 msgTarget 属 性 选项 有 : title、under、side 和 none。 此 外 还 能 以 工具 提示 ( gqtip ) 
风格 显示 出 错 信息 ,或 者 在 特定 目标 (的 内 部 HTML ) 上 显示 。 


创建 自 定义 的 VType 


许多 应 用 系统 都 具有 特殊 的 密码 格式 ,不 妨 举 个 例子 : 我们 的 密码 需要 至 少 一 个 数字 (0~9 )、 
一 个 小 写字 母 、 一 个 大 写字 母 、 一 个 特别 字符 (@、#、$、%……: )， 长 度 在 6~20 个 字符 之 间 。 
那么 ， 可 以 通过 正则 表达 式 来 验证 输入 的 密码 ， 并 创建 一 个 自 定义 的 VType 来 实现 验证 。 创 建 自 
定义 的 VType 很 容易 ， 在 本 例 中 ， 我 们 创建 一 个 名 为 customPass 的 有 自 定 义 VType: 


Ext .apply (Ext.form.field.VIiypes, { 
custompPpass: function(val, field) { 
return /^((?=.*\d) (?=.*[a-z]) (?=.*[A-2Z]) (?=.*[@#S$%]).{6,20})/.test(val):; 
} 
customPassText: ' 不 是 一 个 合法 密码 。 密 三 长 度 应 在 6~20 个 字符 之 间 ， 必 须 和 包含 至 少 一 个 数字 、 一 个 
小 写字 母 、 一 个 大 写字 母 、 一 个 特别 字符 (@#$%) .' 
}); 


customPass 是 日 定义 VType 的 名 称 ， 同 时 需要 声明 一 个 验证 正则 表达 式 的 函数 。 
custompPassText 是 当 输 入 不 正确 密码 格式 时 显示 的 出 错 信 息 。 
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上 面 代 码 可 以 放 到 任意 地 方 : 控制 硕 的 init 困 数 、app.js 的 局 动 图 数 ， 或 者 是 独立 存放 所 
有 目 定 义 VType 的 JavaScript 文 件 里 〈 推 荐 )。 


实际 使 用 时 ， 只 需 简单 地 添加 customPass VType 到 我 们 的 密码 字段 即 可 。 


| 若 希 望 了 解 更 多 关于 正则 表达 式 的 内 容 ， 请 参考 http://www.regular- 


expressions.info/。 


2.2.2 ”添加 市 有 按钮 的 工具 栏 


截至 目前 ， 我 们 已 经 创建 了 Login 窗 体 ， 储 基 中 浴 加 了 市 有 两 个 子 段 的 表单 ， 并 且 完 成 了 验 
证 。 剩 下 的 一 项 任务 就 是 添加 cancel ( 取消) 和 submit (提交 ) 按钮 。 


我 们 准备 添加 一 个 toolpar《〈 工 具 栏 ) 将 取消 和 提交 按钮 作为 其 子 项 (item )， 工 具 栏 作为 
表单 停 驻 项 〈docked item )。 俘 驻 项 可 以 俘 驻 在 面板 的 任意 位 置 。 本 例 中 ， 工 具 栏 停 驻 在 表单 诬 
部 。 在 表单 items 属 性 配置 的 后 面 旅 加 以 下 代码 : 


dockedItems: [ 
{ 


xtype: 'toolbar', 
dock: 'bottom', 
items: I[ 
{ 
xtype: 'tbfill' //#24 
} 3 
{ 
xtype: 'button', // #25 


itemId: 'cancel', 
ijconCls: 'cancel', 
text: 'Cancel' 


xtype: 'button', // #26 
itemId: 'submit', 
formBind: true, // #27 
iconCls: 'key-go', 
text: "Submit" 


] 


回顾 本 章 开 头 第 一 次 呈现 的 Login 界 面 ， 我 们 会 注意 到 有 一 个 具有 多 语言 转换 功能 的 组 件 。 
文 个 组 件 后 面 古 一 块 空 日 ， 然 后 ai 因为 现在 还 没 实 现 多 语言 组 件 ， 我 们 就 
完 只 实现 两 个 按钮 , 但 按钮 需要 出 现在 表单 右 妆 ,同时 还 需要 预 留 空 日 。 这 就 是 我 们 为 什么 首先 
要 在 toolbar 上 添加 一 个 fi11 组 件 (#4 ) 的 原因 一 一 实现 工具 栏 按钮 右 对 齐 。 
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接 下 来 依次 添加 Cancel 按 钮 (#5 ) 和 Submit 按 钮 (#26 )。 再 给 两 个 按钮 添加 上 图 标 
( iconCls )， 后 续 还 要 实现 控制 类 ， 对 按钮 进行 识别 ， 所 以, 我 们 给 这 两 个 按钮 分 配 了 itemIa。 


现在 我 们 已 经 有 了 客户 端 验证 ,但 即使 有 了 这 种 验证 ,用 户 仍 可 以 扣 击 Submit 按 钮 提交 表单 ， 
我 们 应 该 避免 这 种 情况 的 发 生 。 因 此 ， 把 Submit 按 钮 绑 定 到 表单 ( 埠 7 )， 这样， 只 有 表单 的 客户 
疾 验 证 通过 时 ， 才 能 局 用 提交 按钮 。 


下 面 是 Login 表 单 (已 经 添加 了 工具 栏 ) 在 客户 问 验 证 通过 情况 下 的 输出 图 示 : 


J Login > Login 尖 
User: User: Ioiane 
6 cancel BB submit 各 cancel 总 Submit 


2.2.3 运行 代码 
要 运行 目前 已 完成 的 代码 ， 我 们 还 需要 对 app.js 做 一 些 调整 。 


首先 ， 声明 我 们 要 用 到 的 视图 ( 本 例 中 只 有 ss )。 此 外 ， 当 用 Login 类 的 xtype 属 性 进行 
实例 化 时 ， 还 需要 在 requires 中 声明 这 个 类 : 


requires: | 
'Packt .view.Login' 


] ， 


views: | 
'LOg1in' 


] 了 


最 后 需 修改 启动 函数 。 上 一 章 我 们 在 需要 实例 化 视图 的 地 方 用 console.1og 信 息 占 位 ， 现 
在 就 用 Login 实 例 化 代码 来 取代 它 (#1 )。 
splashscreen.next() .fadeOutl(t{ 


duration: 1000, 
remove:true, 


listeners: { 
afteranimate: function(el, startTime, eOpts )t{ 
Ext .widget ('login'); // #1 
} 


}); 
app.js 调 整 完 毕 ， 可 以 运行 完成 的 代码 了 ! 
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2.2.4 _ itemId 还 是 ia: Ext.Cmp 的 问题 


在 创建 控制 希 之 前 ， 还 需要 掌握 一 些 关 于 Ext .ComponentQuery 选 择 带 的 知识 。 本 市 讨论 
的 话题 将 帮助 我 们 更 好 地 理解 创建 Login 窗 体 及 后 续 实现 控制 器 的 思路 。 


只 要 有 可 能 ， 我 们 就 使 用 itemId 属 性 而 非 ig 属 性 来 唯一 标识 某 个 组 件 。 为 什么 呢 ? 


使 用 id 时 ， 要 确保 id 的 唯一 性 ， 应 用 的 其 他 组 件 不 能 使 用 同一 ia。 想像 一 下 : 你 跟 其 他 开 
发 者 在 一 个 项 目 团 队 里 共同 负责 一 个 大 应 用 系统 ， 怎 么 确保 idq 唯 一 呢 ? 相当 困难 ， 儿 乎 做 不 到 。 


可 以 通过 Ext getCmp 全 局 访 问 牢 有 idq 的 组 件 , Ext. getCmp 是 Ext .ComponentManager.get 


的 快捷 方式 。 


举 个 例子 ， 当 使 用 Ext .cmp 通 过 id 获 取 组 件 时 ,将 返回 最 后 使 用 此 ia 的 那个 组 件 ， 如 果 ia 
不 叭 一， 返回 的 组 件 可 能 不 是 你 想 要 的 ， 同 时 也 会 导致 应 用 错误 。 


别 恢 俩 ， 我 们 有 个 很 好 的 解决 方案 ， 那 就 是 用 itemIq 符 代 ;ia。 


itemId 可 作为 获取 组 件 引 用 的 符 代 方式 。itemId 是 容 硕 内 部 的 混合 集合 
(MixedqCollection ) 的 索引 ， 所 以 itemId 屿 处 容 需 的 本 地 作用 域 ， 这 是 itemIdq 的 最 大 优势 。 


例如 , 有 个 名 为 MyWindow1L 的 类 , 扩展 自 window, 在 这 个 类 里 , 有 一 个 itemId 为 'supbmit' 
的 按钮 。 还 可 以 有 男 一 个 名 为 Mywindow2 的 类 ， 也 扩展 自 window， 同 样 有 一 个 itemId 为 
' submit' 的 按钮 。 


两 个 itemId 的 值 相同 并 不 是 什么 问题 ,我们 只 需 关 心 如 何 通 过 Ext .ComponentQuery 获 取 
我 们 需要 的 组 件 。 例 如 ， 有 一 个 别名 为 login 的 Login 窗 体 ， 男 有 一 个 别名 为 registration 的 
Registration( 注册 ) 窗 体 ， 两 个 窗 体 都 有 Save (保存 ) 按钮 ， 其 itemIa 都 为 ' save' ， 如 果 只 是 
使 用 Ext .ComponentOQOuery .query ('button#save'),, 将 返回 一 个 包含 两 个 结果 的 数组 。 然 
而 ， 如 果 进 一 步 缩小 选择 希 的 范围 ， 假 设 我 们 只 想 获 取 Login 窗 体 而 非 Registration 窗 体 的 Save 按 
饵 ， 就 需要 使 用 Ext .ComponentQuery.gquery('login button#save'),, 结果 就 是 Login 窗 体 


的 Save 按 钮 ， 正 是 我 们 所 需 的 。 


注意 ,我们 在 此 并 未 使 用 Ext .getcmp， 因 为 使 用 它 不 是 最 佳 实 践 ， 尤 其 不 适合 ExtJS4。 可 以 使 
用 itemId 和 Ext .Componentouery 替 代 它 。 下 一 方 我 们 将 更 进一步 地 理解 Ext .ComponentOQuery。 
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现在 我 们 已 经 创建 了 Login 界 面 的 视图 。 膛 循 MVC 架 构 模 式 ， 我 们 还 需要 实现 基于 视图 类 的 
用 户 交 互 。 这 时 点 击 Login 窗 体 的 按钮 是 没有 任何 反应 的 ， 因 为 疝 缺 处 理 逻 辑 。 下 面 我 们 就 来 实 
现 控制 希 类 的 处 理 逻 辑 。 
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在 app/controller 目 录 下 ， 创 建 一 个 名 为 Login.js 的 新 文件 。 在 此 文件 里 将 实现 所 有 与 Login 窗 
体 事件 管理 相关 的 代码 。 


Login.js 文 件 里 ， 先 实现 以 下 代码 ， 这 还 只 是 controller ( 控制 各 ) 类 的 基础 代码 : 


Ext .define('Packt.controller.Login', { // #1 


extend: 'Ext.app.Controller', // #2 
views: [| 
'Login,' // #3 
] ， 
init: function(application) { // #4 
this.controll(t // #5 


上 
}); 


通常 ， 类 的 第 一 行 是 它 的 名 称 (#1 )。 遵循 与 view/Login.js 同 样 的 命名 原则 ，Packt ( 应 用 的 命名 
空间 ) 二 controller( 包 和 名 )++ Login( 文件 名 )， 所 以 命名 结果 应 该 是 Packt .COontroller.Logino 


控制 器 JS 文 件 controller/Login.js 和 view/Login.js 文 件 同名 。 由 于 它们 在 不 同 的 
包 里 ， 所 以 这 没什么 问题 。 视图、 模型 、 存 储 器 和 控制 器 具有 相同 的 名 称 ， 这 有 
利于 后 续 更 方便 地 管理 项 目 。 比 如, 项 目 完成 上 线 时 需要 在 登录 窗 体 添 加 一 个 新 
A 的 按钮 。 只 根据 这 点 信息 ( 以 及 少许 的 MVC 概 念 知识 ) 我 们 就 知道 要 在 
View/Login.js 里 添加 按钮 代码 ， 要 在 controller/Login.js 里 实现 按钮 监听 事件 代码 。 

多 维护 性 是 MVC 架 构 的 优势 所 在 。 


控制 大 类 需要 扩展 Ext .app.Ccontroller(#), 因此 我 们 总 是 要 把 它 作 为 控制 右 类 的 父 类 。 

接 下 来 是 视图 声明 (#3 )， 控 制 右 关联 的 视图 都 在 这 里 声明 ， 目 前 只 有 登录 (Login ) 视图 ， 
后 面 还 会 添加 更 多 的 视图 。 

下 一 步 ， 声 明 init 方 法 (的 )。init 方 法 在 应 用 引导 启动 前 ， 先 于 Ext.application 
(app.js) 的 Ilaunch 方 法 被 调用 。 控 制 硕 也 会 加 载 其 类 中 声明 的 视图 、 模 型 和 存储 各 。 

然后 ， 设 置 control 方 法 ( 药 )， 监 听 控 制 需 需 作 出 反应 的 所 有 事件 。 此 外 ， 处 理 Login 窗 体 
及 其 组 件 事件 的 代码 也 写 在 这 里 。 


2.3.1 在 app.js 中 添加 控制 器 
现在 有 了 基本 的 登录 欣 制 融 代 人 码 ， 还 需要 在 app.js 中 添加 欣 制 天。 
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移 除 以 下 代码 ， 因 为 控制 锅 将 负责 加 载 view/Login.js 操 作 。 


requires: | 

'Packt .view.Login' 
] ， 
views: [ 

'LOg1in' 


3 
然后 加 上 控制 右 声 明 : 


controllers: |[ 
'LOg1in' 

| 

项 目 伊始 怠 在 控制 硕 类 里 声明 视图 将 有 助 于 我 们 组 织 代 码 ， 这 样 就 不 需要 在 app.js 里 声明 所 

有 应 用 的 视图 了 。 


2.3.2 ”监听 按钮 点 击 事件 


下 一 步 开 始 监听 Login 宿 体 的 事件 。 首 先 ， 监 听 Submit 和 Cancel 按 钮 。 
我 们 已 经 了 解 到 需要 在 this . contzrol 声 明 里 添加 监听 佑 , 下 面 是 相应 处 理 方式 : 


'Ext .ComponentQuery selector': { 
eventWeWantToListenTo: functionOrMethodWeWantToExecute 


} 


自 完 ， 传人 Ext .ComponentQuery 类 要 用 到 的 选择 各 以 找到 组 件 ， 然 后 列 出 希望 监听 的 事 
件 。 接 下 来 , 声明 监听 事件 触发 的 执行 函数 ,或 声明 事件 触发 时 执行 的 控制 瘟 方 法 的 名 称 。 在 本 
例 中 ， 我 们 声明 的 方法 只 是 为 了 保持 代码 结构 的 完整 性 。 


现在 ， 我 们 将 重点 放 在 如 何 准 确 找 到 Submit 和 Cancel 按 钮 的 选择 天 上 。 根 据 
Ext .Componentouery API 文 档 的 描述 ， 可 以 通过 xtype 取 回 组 件 。( 如 果 你 熟悉 jQuery， 就 会 
发 现 Ext .componentouery 选 择 器 与 jQuery 选择 器 的 行为 非常 类 似 。 ) 下 面 我 们 要 取 回 这 两 个 按 
钮 ， 它 们 的 xtype 是 putton。 注 意 在 编码 之 前 ， 需 验证 一 下 选择 器 是 否 正确 ， 才 能 避免 多 次 调 
整 代 码 。 有 个 小 技巧 打开 浏览 器 控制 台 ， 输 入 以 下 命令 ， 然 后 点 击 Run ( 运行 ) 


Ext .ComponentQuery.query('button').; 


从 截图 中 可 以 看 到 ,用 'button' 选 择 带 查找 运 回 了 一 个 数组 , 里 面 苋 然 有 6 个 按钮 ,这 实在 
是 太 多 了 ,不 是 我 们 期 得 的 结 来 ， 我 们 只 想 要 提交 和 取消 按钮 。 
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Lad <*; = | 点 | 吕 | | Console ~ J HIML Css Script DOM Net » "i 


I Clear Persist Profile All Errors wan Ext.ComponentQuery.queryl button ); 


> EE ComponentOuery， 本 UPwT TT 2 


[ Hriall Ext,buttonButton 是 itemld="ok™, 
text=" DK” 3, [Trial] Ext.button.Button 装 
itemld=" Yes" , text=" "Yes” }, Hriall 
Ext.buttonmButton § itemld="no" ,。 text="No”™ };s 
[Trial] Ext.button.Button { itemld="coancel”, 
text=" Cancel™ }, [Trial] Ext.button.Button { 
itemlds=s" cancel”, text="Cancel®™ |}, [Trial 
Ext.button.Button £ itemld="submit”™., 
text=" Submit"” } ] 


Run ‘Chlear Copy History 


下 面 来 使 用 Login 窗 体 上 组 件 的 xtype 画 出 其 层次 结构 : 


我 们 有 一 个 Login 窗 体 ( xtype: login 或 wvindow )， 窗 体内 有 一 个 表单 (xtype: form )， 
表单 内 有 一 个 工具 栏 (xtype: toolbar )， 工 具 栏 内 有 两 个 按钮 (xtype: button )。 因 此 ， 可 
人 1odln-ftorm-toolpbar-pbuttono 但 是 ， 如 果 我 们 用 login-form-button,， 2 


采 相 同 ， 这 是 因为 表单 内 并 没有 其 他 按钮 ， 来 试 试 : 
Ext .ComponentQuery.query('login form button'); 


在 命令 编辑 硕 里 试 一 下 上 述 选 择 天 : 


人 I fconsole™ | HTML €ss Script DOM Net ci 号 而 司 后 


吧 ; har persiant pronie :Bm ec War ED*t-ComponentQuery.query! ‘login form buttorn' ys 


>>> Ext.ComponentQuery: query(t' Login form 
buttorm" 了 


LifiTrial] Ext.button.Button €£ 
itemld="concel”, text="Concel® }, [Triall 
Ext.button.Button € itemld=" submit™., 

text=" Submit" } ] 


现在 返回 了 仅 包含 两 个 按钮 的 数组 ! 还 有 一 个 问题 : 如 果 使 用 login form button 选 择 需 ， 
将 监听 这 两 个 按钮 的 点 击 事件 〈 虽 然 也 是 我 们 想 监 听 的 事件 )。 但 是 ， 我 们 知道 : 点 击 Cancel 按 
钮 将 重 置 表单 ， 而 点 击 Submit 按 钮 将 提交 表单 数据 至 服务 需 端 验证 登录 , 这 两 个 事件 的 处 理 方式 
不 同 ， 应 该 区 别 对 待 。 因 此 ， 我 们 还 想 进一步 缩小 选择 带 范 围 ， 证 一 个 选择 融 返回 Cancel 按 钮 ， 
另 一 个 选择 大 返回 Submit 控 钮 。 


+, 
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回顾 一 下 view/Login 的 代码 ， 我 们 给 这 两 个 按钮 声明 了 itemId。 可 以 采用 通过 itemIgd 属 性 
配置 来 识别 按钮 的 独特 方式 ， 根 据 Ext .ComponentQuery API 文 档 说 明 ， 可 以 使 用 “#” 作 为 
itemId 的 前 缀 。 在 命令 编辑 需 里 运行 以 下 代码 ， 获 取 Submit 按 钮 的 引用 : 


Ext .ComponentQuery.query('login form button#submit').; 


输出 结 末 就 是 我 们 期 得 的 唯一 按钮 ( Submit 按 钮 ): 


| "| 4|| console v | HTML Css Script DOM Nat cn 十 章 而 


la : Cpa peritee protis -Ml Er Ext .ComponentQuery.query(' login form buttont#asubmit'):; 


=» Ext.ComponentQOuery. dueryt' login 
form button#submit"Yy: 


[一 [Trial] Ext.buttom.Buttom 量 


入 = ， 轩 EE -让 
itemld=" submit”, text=" Submit™ } |] Run Chear Copy History 


再 试 一 下 获取 Cancel 按 钮 的 引用 : 
Ext .ComponentQuery.query('login form button#cancel'); 


输出 结果 就 是 Cancel 按 钮 : 


和: "4 |Console™ | HTML Cs5 Script DOM Net Ch 可 著 硬 


js : har Persist potle < We es, Ext.ComponentQuery queryt'login form button#cancel')Hl 
加 : = | 此 


= Ext, ComponentOuery.querye' Login 
form button#cancel "YY: 


[LiTrial] Ext.button.Button 各 
itemld=" Concel”, text="Concel™”}] 


Run Clear ‘Copy History 


终于 找到 合适 的 选择 器 了 ! 控制 台 命 令 编辑 器 是 个 好 工具 ,能 玫 我 们 节省 大 量 时 间 ， 和 否则 我 
们 会 一 直 编码 、 测 试 …… 


能 否 用 button#submit 或 者 putton#cancel1 作 选择 需 呢 ? 是 的 , 我 们 可 以 使 用 一 个 更 短 的 
选择 需 。 但 是 ， 如 此 一 来 虽然 现 阶段 能 够 正确 工作 ， 而 当 应 用 功能 不 断 丰 富 ， 声 明 的 类 和 按钮 越 
来 越 多 时 ， 所 有 :itemIa 名 称 为 submit 或 cancel 的 按钮 都 将 触发 事件 ， 应 用 就 会 报错 。 一 定 要 
牢记 itemIdq 是 在 容 带 的 本 地 作用 域 里 ， 用 login form button 作 为 选择 希 ， 就 能 确保 事件 来 目 
Login 窗 体 表 单 里 的 按钮 。 


此 ， 在 控制 希 类 里 实现 以 下 代码 : 


init: function(application) { 


this.controll(t 


"login form button#submit": f{ // #1 
click: this.onButtonClickSubmit // #2 

}, 

"login form button#cancel": f{ // #3 


click: this.onButtonClickCancel // #4 
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}, 


onButtonClickSubmit: function(button, e, options) { 
console.log('login submit').; // #5 
}, 


onButtonClickCancel: function(button, e, options) { 
Console.log('login cancel'); // #6 


} 


这 里 ， 先 添加 了 一 个 Submit 按 钮 的 监听 器 (# )， 接 下 来 的 一 行 说 明 我 们 想 监 听 提 交 按钮 的 
点 击 (click ) 事件 ， 当 Submit 按 钮 的 点 击 事件 触发 后 ，onButtonCclLickSsupmit 方 法 将 被 执行 
(《 失 ， 事 件 处 理 方法 )。 


之 后 ， 取 消 按钮 也 一 样 : 声明 一 个 Cance]l 按 钮 的 监听 需 〈 霓 )， 接 下 来 一 行 监听 Cancel 按 
钮 的 点 击 事件 ， 然后 当 Cancel 按 钮 的 点 击 事 件 触发 时 ， 执行 事件 处 理 onButtonclickCancel 
方法 (#4 )。 


接 下 来 ， 声 明 onButtonClickSupbmit 和 onButtonClickCancel 方 法 。 当 前 ， 我们 只 在 控 
制 台 输出 一 条 信息 ， 以 确认 代码 可 以 运行 。 因此， 在 用 户 点 击 Submit 按 钮 时 输出 login submit 
(#5 )， 点 击 Cancel 按 钮 时 输出 login cancel (#6 )。 


但 如 何 知 道 事 件 处 理 方法 可 以 接受 哪些 参数 呢 ” 去 文档 里 找 管 宁 吧 。 看 一 下 文档 里 关于 点 击 
事件 的 描述 ， 可 以 看 到 |: 


: Cliekl Ext.button.Button this, Event e, ObjJect eupts ) 


Fires when this button IS clicked, before the configured handler IS Invoked. ... 


我 们 就 是 这 么 声明 的 。 对 于 其 他 事件 监听 需 ,， 都 去 奋 看 下 文档 ,看 看 事件 接受 什么 参数 ， 然 
后 在 我 们 的 代码 里 列 出 这 些 参 数 , 这 也 是 一 个 很 好 的 实践 。 我 们 应 该 列 出 文档 里 描述 的 所 有 参数 ， 
即使 只 对 第 一 个 参数 感 兴趣 。 这 种 方式 下 我 们 就 能 始终 掌握 已 有 的 完整 参数 集 ， 便 于 维护 应 用 
系统 。 


让 我 们 继续 并 试 着 运行 一 下 。 点 击 Cancel 按 钮 ， 人 然后 再 点 击 Submit 按 钮 。 


运行 结果 如 下 所 示 : 


Mastering Ext | 
Mastering Ext js 十 


| | 大 localhost/masteringextis/ 
es PE 


2 Login 


全 Caneal Submit 


区: 三 |"w [consoler | HH 万 看 国 必 
ls Clear Persist Profile : A Errors Warnings Info Debug Infe 


login cancel Login...6399362 tline 28) 
login submit Login...6399362 tline 24) 


2 oo 


1. 实现 Cancel 按 钮 点 击 事件 处 理 方法 


接 下 来 移 除 console.1og 信 息 ， 并 添加 实际 需要 的 代码 。 第 一 步 ， 人 处 理 onButtonClick 
Cancel 方 法 。 


编码 逻辑 顺序 如 下 : 


(1) 获取 Login 表 单 引 用 ; 
(2) 调用 getForm 方 法 ， 返 回 一 个 表单 基 类 ; 
(3) 调用 reset 方 法 ， 重 置 表单 。 


表单 基 类 提供 了 输入 字段 (input field ) 的 管理 、 验 证 、 提 交 和 表单 加 载 服 
务 。Ext.form.Panel 类 (xtype: form ) 以 容器 形式 存在 ， 并 自动 连接 到 一 
个 Ext .form.Basic 类 的 实例 ， 这 也 是 需要 获取 表单 基 类 的 引用 以 调用 reset 

方法 的 原因 。 


看 一 下 onButtonClickCancel 方 法 中 的 参数 . Buatton. e 和 options， 没有 -个 是 表单 的 
引用 。 


那么 我 们 能 做 些 什 么 呢 ? 我 们 可 以 用 Button 类 (继承 目 AbstractComponent 类 ) 的 up 方 
法 。 通 过 这 个 方法 ,可 以 用 一 个 选择 融 获 取 表 单 。up 方 法 回溯 组 件 层 级 树 ， 寻 找 匹 配 所 传人 选择 
人 妖 的 祖先 容 胡 。 


由 于 按钮 在 工具 栏 里 ， 而 工具 栏 又 在 我 们 要 查找 的 表单 里 ， 使 用 putton.up('form')， 将 
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找到 所 需 的 结 采 。Ext 组 件 层 级 树 中 寻找 按钮 的 第 一 个 祖先 并 找到 工具 栏 ， 但 工具 栏 并 不 
是 我 们 需要 的 ， 因 此 ， 续 往 上 找 ， 下 至 找到 我 们 需要 的 表单 。 


在 onButtonClickCancel 方 法 中 实现 的 代码 如 下 : 


button.up('form') .getForm() .reset();} 


一 些 开 发 者 喜欢 在 window 里 实现 toolbar, 而 不 是 在 form 里 实现 。 这 完全 没有 
问题 ， 只 是 个 人 喜好 而 已 。 在 这 种 情况 下 ， 如 果 拥 有 提交 按钮 的 工具 栏 包含 在 


Window 类 里 面 ， 可 以 这 么 做 : 


button.up('window') .down('form') .getForm() .reset() 


这 样 也 能 达到 同样 目的 ! 


2. 实现 Submit 按 钮 点 击 事件 处 理 方 法 


现在 ,需要 实现 onButtonClickSubmit 方 法 。 在 这 个 方法 中 ,我 们 要 完成 把 用 户 名 和 密码 
的 值 发 送 到 服务 需 端 以 对 用 户 进行 验证 的 逻辑 代码 。 


在 这 个 方法 里 实现 处 理 逻 辑 有 两 种 选择 : 第 一 种 是 使 用 submit 方 法 ( 表单 基 类 提供 ), 第 二 
种 是 通过 Ajax 方 式 提交 数据 。 无 论 哪 种 方式 ,都 会 达到 目标 。 但 是 ， 在 我 们 作出 选择 之 前 有 一 个 
细节 必须 给 予 关 注 : 如 果 使 用 表单 基 类 的 submit 方 法 ， 在 把 密码 发 送 给 服务 融 之 前 将 无 法 将 密 
码 加 蜜 ， 查 看 一 下 发 送 给 服务 顺 端 的 参数 ， 会 发 现 密 人 码 是 纯 文 本 格式 ， 这 不 是 个 好 事 儿 。 通 过 
Ajax 请 求 也 将 达到 同样 目标 ， 而 且 我 们 可 以 在 密码 发 送 给 服务 融 端 之 前 将 其 加 密 。 很 显然 ， 第 二 
种 选择 看 起 来 更 合适 ， 我 们 将 采取 这 种 方式 。 

方法 执行 的 步 又 如 下 。 

口 获取 Login 表 单 引 用 。 

口 获取 Login 窗 体 引用 ( 一旦 用 户 认 证 通过 ， 我 们 就 可 以 关闭 它 )。 

口 通过 表单 获取 用 户 名 和 密码 。 

口 加 密 密 码 。 

口 发 送 登录 信息 至 服务 部 端 。 

口 处 理 服务 硕 端 啊 应 : 


四 如 采用 户 通 过 认证 ， 则 呈现 应 用 界面 ; 
@@ 如 果 用 户 未 通过 认证 ， 则 显示 出 错 信 息 。 


首 乞 ， 我 们 来 获取 需要 的 引用 : 


var formPpanel = putton.up( ' torm' ) ， 


+, 
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login = button.up('login'), 
usSer formpanel .down('textfield[lname=user]') .getValue(), 
pass formPanel .down('textfield[name=password]') .getValue(); 


获取 表单 3 | 用 时 可 以 使 用 button .UpP('form') 代码 3 就 像 曾经 在 cnButtonCc1lickcancel 
方法 里 使 用 的 一 样 。 采 用 同样 的 方式 可 获取 登录 窗 体 的 引用 ， 只 需 将 选择 需 改 为 1ogin 或 
window， 然 后 通过 down 方 法 获取 user ( 用 户 名 ) 和 password ( 密码 ) 字段 的 值 , 但 现在 选择 用 表 
单 引用 。 用 文本 字段 的 xtype 属 性 值 作 为 选择 融 。 为 了 确保 获取 正确 的 文本 字段 ， 可 以 创建 一 个 
itemId 属 性 ,但 在 这 里 不 是 必须 的 。 我 们 可 以 采用 name 属 性 ， 因 为 user 和 password 字 段 有 不 
同 的 名 称 且 它们 在 登录 窗 体 里 是 唯一 的 。 在 选择 各 里 使 用 属性 需要 把 它 包 在 方 括 号 里 。 


下 一 步 ， 提 交 值 至 服务 天 闪 ; 


if (formPpanel.getForm() .isValid()) { 
Ext .Ajax.request(t{ 
url: 'php/login.php', 
params: { 
User: user, 
password: pass 


De 
} 


如 果 试 着 运行 这 段 代 码 , 应 用 程序 会 发 送 请 求 至 服务 需 端 ,但 现在 会 得 到 一 个 啊 应 错误 ， 
为 还 未 实现 1ogin.php 人 代码。 姑且 把 这 个 问题 放 一 放 ， 我 们 先 来 关注 下 别 的 细节 。 

打开 Firebug 或 Chrome Developer Tools， 再 打开 Net 标 签 页 并 过 滤 出 XHR 请 求 信 息 ， 输 入 用 户 
名 和 密码 ( 确保 输入 了 合法 值 ， 这 样 我 们 才 可 以 正确 提交 )， 输 出 如 下 : 


WN 2: 三 | Console HIML CSS Script DOM | Netv 


a Clear Persist Al HIML CSS JS XHR Images Flash Media 


URL Status Domain 
YY POST login.php 404 Not Found localhost 


Headers Post Response HTML 


Parameters 


password myPassword 
User lioiane 


Source 


user=loiane&password=myPassword 


1 request 
现在 还 未 对 密码 进行 加 密 , 显示 出 来 的 还 是 原始 值 , 这 样 并 不 好 。 我们 需要 对 密友 进行 加 密 。 


在 app 目 录 下 ， 新 建 一 个 目录 ， 命 名 为 util， 在 这 里 将 创建 我 们 所 需 的 工具 类 。 创 建 一 个 新 文 
件 并 命名 为 MD5.js, 同时 也 有 了 一 个 名 为 Packt .util.MD5 的 新 类 。 这 个 类 包含 了 一 个 静态 方法 
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encode， 可 以 对 所 给 的 值 进 行 MD5 算 法 编码 加 密 。 要 进一步 了 解 MD5 算 法 ， 请 参考 这 里 
http://en.wikipedia.ors/wikWMD5。 因 为 Packt .util.MD5 类 的 代码 很 多 ， 就 不 在 这 里 列 出 了 ， 可 
以 在 http://www.packtpub.com/mastering-ext-javascript/book 下 载 本 书 源 代码 ， 或 到 https://github.conmy 
loiane/masteringextjs 获 取 最 新 版 本 的 源 代 人 码 。 


如 果 你 想 让 窗 码 传输 变 得 更 安全 ， 也 可 以 SSL 加 密 技 术 ， 向 服务 器 端 请 


ee 为 密码 加 盐 ， 并 对 其 进行 hash 处 理 。 读 者 可 通过 以 下 链 
接 进 一 步 学 握 相 关 人 信息: Ne ee ee 和 


http:// ei org/wiki/Salt (cryptography)。 


静态 方法 不 通过 类 实例 就 能 被 调用 。 在 Ext JS 中 ， 我 们 可 以 在 静态 配置 里 声明 静态 属性 和 静 
态 方法 。 Tae util.MD5 类 中 的 encode 方 法 是 静态 方法 ， 就 可 以 像 Packt .util .MD5. 
encode (value,) 这 样 来 调用 它 。 


在 Ext .Ajax.request 之 前 ,添加 以 下 代码 : 
pass = Packt.util.MD5 .encode (pass); 


于 万 别 忘 了 在 控制 句 的 *xequires (请 求 ) 声明 当中 添加 Packt .util.MD5 类 ( requires 
声明 紧 跟 在 extend 声 明 后 面 ): 
requires: | 


'Packt .util.MDDS' 
] ， 


现在 青 一 次 运行 代码 ， 打 开 Net 标 签 页 观察 XHR 请 求 ， 输 出 如 下 图 所 示 : 


5 凡 :三 | Console HIML Css Script DOM | Net™ | 


I Clear Persist All HIML Css JS XHR Images Flash Media 


ds 和 m | Statu L ds 四 | Dom | ain 
POST login.php 404 Not Found localhost 
Headers Post Response HTML 
Parameters 
password 如 瑟 ] 与 了 S 下 二 B04 7 了 S57d593219aalafd?d ec 


User lolane 


SUTCE 
user=]olanegkpaseword=deblS36f480475f7d593219aalafd7T4ce 


lrequest 


现在 ， 密 人 码 经 过 加 密 变 得 足够 安全 了 。 


J 此 处 的 “ 盐 ” 其 实 就 是 一 个 随机 生成 的 字符 串 。 一 一 译 者 注 


-大 
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+ 


2.4 创建 用 户 和 有 用户 组 表 


在 对 1ogin.php 页 面 进 行 编码 之 前 ， 我 们 还 需要 往 saki1l1a 数 据 库 中 添加 两 张 表 。 这 两 张 表 
代表 用 户 (User ) 和 用 户 所 属 的 用 户 组 (Groups )。 在 这 个 项 目 里 ,用户 只 能 归属 于 一 个 用 户 
组 ， 关 系 如 下 图 所 示 : 


User Y 
: J 一 车 
重 癌 INT 
rs 入 SS name VAACHARLTOD 
| Groups ba 
Es Usertame VARCHARAL2O) 
请 吉 INT 
| password YARACHARALTOD) 
S nam VARGCHARAI4S 
Ey Emall VARCHARAL1OO) 


> picture VARCHARL 100) 
PY Group_id INT 


上 一夫 


首先 创建 Groups 表 : 


CREATE TABLE IF NOT EXISTS ‘sakila . Groups ( 
id. INT NOT NULL AUTO INCREMENT  ， 
‘name VARCHAR(45) NOT NULL ， 
PRIMARY KEY (id ) ) 

ENGINE = InNnnoDB; 


接 下 来 ， 我 们 创建 带 索 引 的 User 表 ， 同 时 创建 到 Groups 表 的 外 键 : 


CREATE TABLE IE NOT EXISTS ‘sakila'. User ( 
id. INT NOT NULL AUTO INCREMENT  ， 
‘name VARCHAR(100) NOT NULL ， 
‘userName VARCHAR(20) NOT NULL ， 
‘password VARCHAR(35) NOT NULL ， 
‘email. VARCHAR(100) NOT NULL ， 
‘picture VARCHAR(100) NULL ， 
‘Group_id. INT NOT NULL ， 
PRIMARY KEY (“id‘, ‘Group id`),, 
UNIQUE INDEX ‘userName UNIOQOUE. (‘userName ASC) ， 
INDEX “fk User Groupl idx ( Group id ASC) ， 
CONSTRAINT “fk User_ Groupl. 
FOREIGN KEY (Group _ id ) 
REFERENCES ‘sakila . Groups ( .id ) 
ON DELETE NO ACTION 
ON UPDATE NO ACTION) 
ENGINE = InNnnoDB; 


下 一 步 ， 往 这 两 张 表 里 插入 些 数 据 : 


INSERT INTO ‘sakila . Groups ( name ) VALUES ('admin').; 
INSERT INTO ‘sakila . User (name ， ‘userName , ‘password ， ‘email’, "Group iqd) 
VALUES ('Loiane Groner', 'loiane', 'el0adc3949ba59abbe56e057f20f883e', 


ImeG@loliane.com' i 


因为 密码 被 加 密 并 保存 在 数据 库 当 中 ， 值 e10adc3949ba59abbe56e057f20f883e 解 密 后 
孢 是 123456。 


现在 ， 我 们 准备 开始 编写 1ogin .php 页 面 了 。 


2.5 服务 器 端的 登录 界面 处 理 


由 于 我 们 有 部 分 ExtJS 代 码 需要 发 送 登 录 信 息 到 服务 天 站， 因此 ， 也 震 要 实现 对 应 的 服务 大 
谢 人 代码。 如 第 1 章 里 提 到 的 ， 本 书 将 用 PHP 实 现 服务 带 闯 代码。 如 采 你 不 了 解 PHP， 也 不 必 担 心 ， 
我 们 的 PHP 代 码 并 不 复杂 ， 而 且 只 使 用 PHP 技 术 (〈 不 涉及 各 种 PHP 框 洪 ),。 我 们 将 重点 关注 服务 大 
于 程序 处 理 逻 辑 ， 你 也 可 以 用 目 己 豆 欢 的 服务 融 端 语言 来 实现 同样 的 程序 逻辑 〈Java、.NET、 
Python 、Ruby 等 )。 


连接 数据 库 的 PHP 文 件 ,， 我 们 后 面 要 开发 的 PHP 页 面 差不多 都 要 重用 这 
my 


在 项 目的 根 目录 下 创建 名 为 php 的 文件 夹 , 在 php 里 面 再 创建 名 为 db 的 文件 夹 , 然后 在 db 文件 
夹 里 创建 名 为 db.php 的 文件 : 


<?php 

Sserver = "127.0.0.1"; 

Suser = "root",; 

Spass = "root",; 

SdbName = "sakila"; 

Smysqli = new mysqli(Sserver, Suser, S$pass, S$dbName); 


/* 检查 连接 */ 

if (Smysqli->connect errno) 1{ 
printf("Connect failed: %s\n", mysqli connect error()); 
exit(); 


} 


?> 


连接 代码 非常 直接 明了 : 只 和 需 告 知 服务 侣 (本 例 中 是 localhost )、 数 据 库 用 户 名 和 和 密码， 以 
及 我 们 准备 连接 的 数据 库 的 名 称 。 最 后 ， 检 查 连 接 操作 成 功 与 否 


若 希 望 了 解 更 多 有 关 mysqli 的 信息 ， 请 访问 http://php.net/manual/en/book. 
mysqli.php。 


+, 
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2.5.2 login.php 
最 后 ， 我 们 在 php 文 件 夹 里 创建 login.php 文 件 ， 并 实现 它 : 
require("db/db.php"); // #1 
session start(); // #2 
SuserName = $_ POST['user']; // #3 
Spass = $_ POST['password']; // #4 
SuserName = stripslashes (SuserName); // #5 
paes 三 Ettipelasnes (Shass) // #6 
SuserName = Smysqli->real escape string (SuserName); // #7 
Spass = $mysqli->real escape_ string (S$pass);} // #8 
Ssql = "SELECT * FROM USER WHERE userName='S$userName' and 
password='Spass'"; // #9 


首先 ， 我 们 要 请 求 db.php 文 件 以 连接 数据 库 (#1 )， 然 后 开启 一 个 会 话 ， 后 面 需 把 用 户 名 保 
存在 会 话 中 (可 )。 


下 一 步 是 取得 Ext .Ajax.request 发 送 的 用 户 名 和 蜜 个 《多 和 的 ) 


sttripslashes 图 数 移 除 所 获取 字符 串 里 的 反 笠 杠 ( 药 和 丰 6 )。 比 如 ， 用 户 名 是 Loiane\'s， 
stripslashes 困 数 的 返回 结 了 怠 是 Loiane's。 


然后 用 real_escape_string 图 数 来 准备 在 SQL 语句 中 使 用 的 susername 和 Spass 变 量 
(#7 和 #8 )。real_escape_string 困 数 用 于 转 义 SQL 语句 中 所 用 字符 串 里 的 特殊 字符 ”。 


接 下 来 ,准备 将 被 执行 的 SQL 查 询 语 句 (#9 ) 这 是 一 个 简单 的 SELECT 请 句 ， 返 回 一 个 与 提 
供 的 用 户 名 和 密码 条 件 相 匹配 的 结 


继续 实现 下 一 部 分 的 代码 : 


Sresult = array(); // #10 


if (Sresultdb = $mysqli->query($sql)) { // #11 


Scount = Sresultdb->num rows; // #12 
if (Scount==1)tft 
$s_SESSION['authenticated'] = "yes"; // #13 


QD 转 义 特殊 字符 主要 是 出 于 安全 方面 的 考量 ， 防 范 “ 恶 具 ” 的 SQL 注入 攻击 。 一 一 译 者 注 
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$s SESSION['username'] = SuserName; // #14 

Ssresult['success'] = true; // #15 

Sresult['msg'] = 'User authenticated!'; // #16 
} else { 

Ssresult['success'] = false; // #17 

Sresult['msg'] = 'Incorrect user or password.'; // #18 
} 
sresultdb->close(); // #19 


} 


login .php 代 人 码 的 第 二 部 分 里 ， 首 先 创建 了 一 个 result 变 量 (#10 )， 存 放 我 们 打算 返回 给 
Ext JS 的 结果 数据 O 


接 下 来 ， 执 行 SQL 查 询 语句 ， 并 存放 结果 到 resultdb 变 量 中 (机 1 )。 然 后， 存储 结果 集 的 
行 数 (#12 )。 


现在 到 了 最 重要 的 代码 部 分 ， 我们 准备 验证 结果 和 集 返 回 了 多 少 行 。 传 和 人 用户 名 和 密码 后 ， 
如 果 用 户 名 和 密码 匹配 上 了 数据 库 中 的 信息 ， 结 果 集 返回 的 行 数 应 该 正好 是 1。 所 以 ， 如 果 行 
数 是 1 的 话 ， 就 将 认证 用 户 的 用 户 名 保存 至 会 话 中 (#14 )， 同 时 也 保存 用 户 通过 认证 的 信息 
(#13 )。 


我 们 需要 准备 好 返回 给 Ext JS 的 结果 ， 主 要 返回 两 个 信息 : 第 一 个 是 用 户 通 过 认证 的 信息 
(#15 )， 本 例 中 为 tue， 同 时 再 返回 一 个 描述 信息 (#16 )。 


如 果 用 户 名 和 密码 不 匹配 ( 结果 集 返 回 的 行 数 不 是 1 )， 我 们 也 将 返回 一 个 信息 给 Ext JS 告知 
用 户 名 和 密码 不 正确 (#18 )， 因 此 ，success 为 false (#17 )。 然后， 关闭 结果 集 (#19 )。 


接 下 来 是 第 三 部 分 也 是 最 后 一 部 分 Login .php 代 人 码 了 : 


Ssmysqli->close(); // #20 


echo JjJson encode(S$sresult); // #21 


关闭 数据 库 连 接 〈 恕 0 )， 把 返回 给 Ext JS 的 结果 编码 成 JSON ( JavaScript Object Notation ， 
JavaScript 对 象 表示 法 ) 数据 格式 (#21 )。 


现在 ，1ogin.php 页 面 的 代码 就 完成 了 ， 最 后 别 筷 了 把 代码 放 在 <?php 和 ?> 之 间 。 
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2.5.3 ”处 理 服务 器 端的 返回 结果 一 一 登录 与 否 
我 们 已 经 了 解 了 服务 器 端 代码 , 现在 回头 来 看 Ext JS 代 码 , 并 处 理 服务 器 端 返回 的 响应 信息 。 
但 是 , 我 们 首先 需要 理解 一 个 非常 重要 的 概念 , 这 个 概念 常常 困扰 着 大 多 数 的 ExtJS 开 发 者 。 
成 功 还 是 失败 
Ext .Ajax 类 执行 Ext JS 发 出 的 所 有 Ajax 请 求 。 如 果 我 们 看 一 下 文档 ， 就 会 发 现 这 个 类 有 三 


个 事件 ， 分 别 为 : beforerequest. requestcomplete 和 requestexception。 


beforerequest 事 件 在 请 求 发 起 前 触发 ，requestcomplete 事 件 在 Ext JS 准 备 获取 服务 化 
闹 啊 应 时 触发 ， 而 requestexception 事 件 在 服务 带 问 返回 HTTP 错 误 状 态 时 触发 。 


现在 ， 我 们 回 到 Ext .Ajax.request 的 调用 上 。 我 们 可 以 传 一 些 选 项 给 请 求 : 想 连 接 的 
URL、 参 数 以 及 其 他 选项 ， 包 括 success( 成 功 ) 函数 和 failure( 失败 ) 函数 。 现 在 ,误解 出 现 
了 一些 开 发 者 认为 , 如果 服务 带 问 动 作成 功 完成 , 我们 就 会 从 服务 右 问 返回 success = true; 
如 果 不 成 功 ， 我 们 就 返回 success = false。 因 此 ，success = true 时 的 逻辑 在 success 贞 
数 里 处 理 ， 而 success = false 时 的 逻辑 在 failure 蚂 数 里 处 理 。 这 是 销 的 ， 这 不 是 Ext JS 的 工 
作 机 制 。 


对 于 Ext JS 而 言 ，success 表 示 服 务 句 六 返回 了 一 个 啊 应 (success = true 或 是 success = 
false 都 无 所 谓 )，failure 表 示 服 务 需 端 返回 了 一 个 HTTP 错 误 状 态 。 这 就 意味 着 如 果 服 务 器 端 返 
回 一 个 响应 ， 我 们 就 该 在 success 函 数 里 处 理 这 个 响应 ( 同时， 还 需要 处 理 success 信 息 是 true 
还 是 false 的 情况 ); 同样 ， 在 failure 函 数 里 需要 通知 用 户 信 息 出 钳 了 ， 用 户 据 此 联系 系统 维护 
大 


我 们 先 来 实现 failure 函 数 的 代码 ， 在 Ext .Ajax.request 调 用 中 ,添加 以 下 代码 : 


failure: function(conn, response, options, eOpts) { 
Ext .Msg.show(t 
title: 'Error!', 
msg: Conn.responseText, 
ilicon: Ext.Msg .ERROR, 
buttons: Ext.Msg.OK 
}); 
} 


结 末 将 显示 一 个 警告 框 给 用 户 ， 和 警告 框 里 有 一 个 错误 图 标 、 一 个 OK 按钮 ， 以 及 HTTP 错 误 状 
态 信 息 。 


我 们 来 制造 个 错误 以 便 请 求 异 常事 件 被 触发 。 出 于 测试 目的 ,暂且 更 改 login.php 文 件 名 ( 比 
如 更 改 为 login .php )， 然 后 执行 代码 ， 输 出 如 下 : 
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于 证 :过 吕 三 | || consolev | HIML Css Script DOM Net Cookies 
I® : Clear Persist Profile : Al Errors Warnings Info DebugInfo Cookies 


人 "NetworkError: 464 Not Found - http://localhost/masteringextijs/php/Login,php" : 
Errerl 从 


Object not found! 
The reqguested URL Was nat found on this server. The link on the referring page seems to 
be wrong or outdated. Please inform the author of that page about the error. 
IF you think this is a server erron please contact the webmaster. 
Error 404 
Iocalhost 
村 OF Dee 这 起 :1 庆 :1 训 这 
eh/ 27.2. 14 (UR) DAV mod sal/2.2.14 OperssL 09:8 PHP/S.S.1 mrid ger/2.0.4 Peorias, 10.1 


OK 


这 正 是 我 们 希望 failure 捕 数 呈 现 的 结果 。 项 目 所 有 Ext.Ajax.request 调 用 里 的 所 有 
failure 国 数 都 可 重用 这 段 代码 。 


现在 我 们 来 关注 下 success 函 数 的 代码 实现 : 
success: function(conn, response, options, eOpts) { 


Var result = Ext.JSON.decode (conn.responseText, true); // #1 


If (!result){ // #2 
result = {}; 
result.success = false; 


result.msg = conn.responseText; 


if (result.success) { // #3 


login.close(); // #4 
Ext.create('Packt.view.MyViewport'); // #5 


} else { 
Ext .Msg.show(t 
title:'Fail!', 
msg: result.msg, // #6 
icon: Ext.Msg .ERROR, 
buttons: Ext.Msg .OK 


首先 我 们 要 做 的 就 是 解码 从 服务 器 端 收 到 的 JSON 信 息 (机 )。 如 果 记 录 conn 参 数 发 送 到 
success 子 数 的 信息 (console.1og (conn) )， 那 么 控制 台 输 出 将 显示 如 下 : 


BB regquest Object { id=s1, headers={..}, optiomnssl...}s more.. } 
Ped uestld 1 


responseText "{"success" :false, "msg":"Incorrect User on password."}" 


FesponserML nu 

skatus 2 
skatusText "OK" 
getAllResponseHeaders functiont 


getResponseHeader functicont 


解码 conn.responseText ， 这 下 是 我 们 希望 取 回 的 内 容 ， 这 样 就 可 以 访问 result. 
success 和 result .msg 了 。 还 需要 注意 一 个 细节 : 我 们 不 知道 服务 融 闪 会 返回 些 什 么 ， 但 我 们 
总 是 期 待 返回 的 就 是 success 和 msg 信 息 ， 然 而 ， 这 并 不 能 得 到 保证 。 如 果 其 他 MySQL 错 误 信 息 
被 返回 , 它 也 将 在 conn .responseText 里 面 并 随 之 返回 , 那 就 不 是 我 们 期 竺 的 JSON 数 据 格 式 了 。 
如 采 出 现 这 种 情况 ，Ext.JISoON.decode 困 数 会 失败 并 抛 出 异 稼 。 可 以 忽略 这 个 异 稍 〈 给 
Ext .JSON .decode 也 数 的 第 二 个 参数 传人 true 值 ， IEeSul tt 变量 的 值 就 变 为 nuL1L 了 )， 但 仍然 需 
要 处 理 它 。 这 正 是 检查 result 变 量 是 否 为 nu1l11 时 要 做 的 工作 ( 埠 )。 如 果 result 为 null1， 就 实 
例 化 result 变 量 并 分 配给 它 一 些 值 ( msg 会 接收 服务 右 问 发 送 的 错误 )。 如 有 果 不 进行 处 理 ， 用 户 
点 击 提交 按钮 将 发 现 没有 动静 。 


如 条 success 为 true( 娄 )， 就 意味 着用 户 在 服务 大 端 通过 认证 ， 那 我 们 就 可 以 做 点 什么 事 
了 ， 比 如 关闭 登录 窗 体 从 )， 然 后 显示 应 用 系统 (#7 )。 因 为 现在 还 未 创建 Packt .view. 
MyViewport 类 ， 我 们 就 先 注 释 一 下 ， 等 实现 了 该 类 下 回来 移 除 这 个 注释 。 在 Packt .view. 
MyViewport 类 中 ,将 显示 有 亲 单 、 标 题 、 页 脚 ， 以 及 应 用 系统 的 中 央 面 板 ， 它 是 应 用 系统 呈现 界 
面 的 地 方 。 


男 外 ， 当 success 为 false 时 ,意味 着 用 户 名 或 密码 不 匹配 数据 库 里 的 信息 ,这 时 候 就 要 显 
示 一 个 服务 各 端 发 来 的 错误 信息 给 用 户 (#6 )， 表 明 输 入 了 不 正确 的 用 户 名 或 密码 。 

右 服 务 融 咒 发 生 了 其 他 错误 ， 就 如 我 们 在 妃 行 摘 述 的 那样 , 错误 会 返回 给 ExtJS。 举 个 例子 ， 
输入 错误 的 密码 给 数据 库 连 接 代 码 ， 登 录 时 就 会 显示 如 下 错误 : 


Failt 


(3 Warning: mysqlis:mysalit) [mvsali.mysalll: (C2000/1045): Acoess denied for User 
Toot mocalhost’ (using password: YES) im /Applications/XAMPP /xampprfiles/htdocs 
[masteringextjs/php/db/db.php on line 7 
Connect failed: Access denied for user ‘root'®@'localhost’ (using password; YES) 


OK 


如 此 一 来 ,我们 可 以 处 理 所 有 的 服务 带 问 啊 应 ， 包 括 所 有 的 异 般 ， 而 这 正 是 我 们 期 待 的 。 
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2.6 优化 登录 界面 


登录 界面 已 经 完成 了 。 然 而 , 我 们 还 可 以 继续 对 它 进 行 一 些 优化 ,让 它 变 得 更 好 , 并 提供 更 
好 的 用 户 体验 。 2 
我 们 将 对 登录 界面 做 以 下 优化 : 


口 认证 进行 时 ， 提 供 一 个 加 载 这 日; 
口 用 户 按 下 回 车 键 时 提交 表单 ; 
口 显示 信息 提醒 用 户 大 写 键 已 激活 。 


2.6.1 ”进行 认证 时 为 表单 提供 一 个 加 载 庶 章 

有 时 候 ， 用 户 点 击 提交 按钮 等 竺 服务 硕 端 的 啊 应 ， 这 个 过 程 可 能 会 有 些 延 壕 。 有 些 用 户 
可 能 很 有 醒 心 ， 但 有 些 用 户 就 没有 ， 没 耐心 的 用 户 会 再 次 点 击 提交 按钮 ， 从 而 再 一 次 发 送 请 
求 到 服务 器 端 。 我 们 可 以 在 用 户 等 待 服务 部 端 啊 应 的 同时 ， 给 登录 窗 体 加 载 一 个 遮盖 来 规避 
这 种 行为 。 

首先 ， 需 要 在 Ext .Ajax.reduest 调 用 代码 表面 添加 以 下 代码 : 

ExXt .get (login.getEl1()) .mask ("Authenticating... Please wait...", 'loading'); 
这 将 为 登录 窗 体 添加 一 个 遮 蛙 。 

然后 ， 在 success 和 failure 搬 数 的 第 一 行 添 加 一 行 代码 : 

Ext .get (login.getEl()) .unmask(); 
这 将 移 除 登 录 窗 体 上 的 遮 单 。 

如 果 现 在 执行 代码 ， 输 出 如 下 图 所 示 : 


2 Legin 


User: Iaiane 


Password: 2% Authenticating,.. Please wait... 


加 Cancel Bp Submit 


请 注意 ， 这 时 所 有 的 按钮 都 不 能 点 击 了 ， 直 到 服务 器 端 响应 返回 ， 用 户 才能 再 点 击 按钮 。 
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2.6.2” 回 车 提交 表单 


对 于 采 些 类 型 的 表单 , 特别 是 登录 表单 ,用户 输入 完 信 息 后 会 很 目 然 地 敲 个 回 车 键 ,但 ExtJS 
里 并 未 日 动 提 供 这 个 功能 ， 因 此 我 们 需要 实现 它 。 


textfieldq 组 件 里 有 一 个 事件 可 以 处 理 像 回 车 键 这 样 的 特定 按键 。 这 个 事件 叫 specialkey， 
就 是 我 们 在 登录 控制 器 里 要 监听 的 事件 。 首 先 ， 在 this .control 声 明 中 加 入 以 下 事件 代码 : 


"1odgln form textfield": { 
specialkey: this. onTextfieldSpecialKey 
} 


我 们 使 用 了 1ogin form textfieldq 选 择 需 ， 从 而 可 以 获取 登录 表单 中 的 所 有 文本 字段 ， 
即 user 和 passworq 字 段 。 之 后 用 户 在 文本 字段 里 按 回 车 键 就 会 提交 表单 。 


接 下 来 ， 同 样 是 在 控制 名 里 实现 onTextfieldspecialKey 方 法 : 


onTextfieldSpecialKey: function(field, e, options) { 


if (e.getKey() == e.ENTER)T{ 
Var submitBtn = field.up('form') .down('button#submit').; 
submitBtn.fireEvent('click', submitBtn, e, options);} 


} 


首先 , 我 们 需要 验证 用 户 按 下 的 是 否 是 回 车 键 。 然后 ,获取 Submit 按 钮 的 引用 : 先 获取 表单 
的 引用 ， 再 获取 在 组 件 层 级 中 位 于 表单 之 下 的 Submit 按 钮 的 3 引用。 最 后 ， 手 动 处 理 Submit 按 钮 的 
点 击 事 件 触发 。 这 种 方式 下 ，onButtonclicksubmit 方 法 将 自动 被 调用 ， 因 为 仍 在 onButton 
clicksubmit 方 法 里 验证 表单 的 合法 性 ， 就 可 以 确保 客户 端 验证 失败 时 请 求 不 会 被 提交 。 


2.6.3 ”大 与 键 提醒 信息 


最 后 的 优化 工作 是 给 表单 添加 一 个 大 写 键 提 醒 功 能 。 大 与 键 被 激活 的 情况 下 输入 密码 时 , 由 
于 系统 区 分 大 小 写 ， 即 使 输入 正确 的 密码 ， 系 统 仍 会 报错 。 所 以 ， 在 此 设 个 提醒 是 很 有 儿 要 的 。 


激活 大 写 键 ， 输入 信息 后 的 最 终 效 果 如 下 所 示 : 


Legin 
User: laiane 
Password: | reve 二 


总 Caps Lock is On 
Having Caps Lock on may cause you to enter your passiword 
incorrectly. | 
You should press Caps Lock to turn it off before entering | 
YOUT password. 
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从 图 中 可 以 看 到 ,我 们 通过 工具 提示 (tooltip ) 显示 提醒 全息。 因此， 首先 就 是 回 到 app .js 
的 launch 了 哺 数 ， 在 第 一 行 添加 以 下 代码 : 


Ext .tip.QuickTipManager.init(); 
没有 这 行 代 码 ， 工 具 提 示 就 无 法 工作 。 
另 一 个 相关 操作 是 在 Ext .application (app.js) 中 把 enableQuickTip 属 性 设 为 true。 


此 外 ， 需 要 监听 keypress 事 件 ， 我 们 只 监听 passworq 字 段 触发 的 这 之 个 事件 。 默认 状态 下 
En 触发 这 个 事件 ,因为 这 会 对 性 能 有 所 影响 。 现 在 要 监听 这 个 事件 ， 就 需 ;要 在 
password 字 段 添加 一 个 属性 配置 〈 在 login.js 文 件 中 )。 


name: 'password', 
fieldLabel: "Password", 
enableKeyEvents: true, 
id: 'password' 


同时 ， 给 passwora 字 段 添加 一 个 ida。 虽 然 我 们 曾经 讨论 过 用 ia 字段 符 代 itemIdq 是 不 好 的 ， 
但 在 这 里 别 无 选择 。 因为 , 创建 工具 提示 时 , 需要 设置 一 个 目标 ( 这 里 , 这 个 目标 就 是 password 
字段 )， 这 个 目标 只 能 接受 组 件 的 1da， 而 不 接受 itemIa。 


在 添加 代码 到 控制 融 之 前 ， 我 们 先 创 建 工 具 提 示 。 我 们 准备 创建 一 个 名 为 Packt .view. 
authentication.CapsLockTooltip 的 新 视图 ， 因 此 ， 需要 在 app/view/authentication 目录 下 创 
建 一 个 capsLockTooltip . ] s 文 件 。 


Ext .qdqefline('Packt.vVIiew.authentication.CapsLockTooltiP'，({ 
extend: 'Ext.tip.QuickTip', 
alias: 'widget.capslocktooltip', 


target: 'password', 
anchor: 'top', 
anchorOffset: 60, 
width: 300, 


dismissDelay: 0, 

autoHide: false, 

title: '<div class="capslock">Caps Lock is On</div>', 

html: '<div>Having Caps Lock on may cause you to enter your password</div>' + 
'<div>incorrectly.</div><br/>' + 
'<div>You should press Caps Lock to turn it off before entering</div>' + 
'<div>your password.</div>' 


}); 


在 Packt.view.authentication.CapsLockTooltip 视 图 中 声明 一 些 属性 配置 来 设置 工 
具 提 示 的 行为 。 来 看 以 下 属性 设置 项 。 


口 target password 字 上 段 日 动 的 id 值 。 


+, 
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D anchor 表明 提示 信息 固定 在 目标 元 素 (password 字 段 ) 的 哪 边 "， 带 一 个 指 回 目标 元 
素 的 小 箭头 。 

口 achoroffset 数值 (以 像素 为 单位 )， 用 来 设置 anchor 季 头 的 偏 移 量 ， 这 里 ， 箭 头 显 示 
在 离 工 具 提示 框 起 始 位 置 60 像 素 的 地 方 。 

口 width 数值 型 (以 像素 为 单位 )， 表 示 工 具 提 示 框 的 宽度 。 

D dismissDelay 工具 提示 延迟 隐藏 的 数值 ( 以 毫秒 为 单位 )， 因 为 我 们 不 希望 工具 提示 
自动 隐藏 ， 所 以 就 将 其 设 为 0， 禁 止 隐藏 。 

D autoHide 奉 设 为 true， 当 鼠标 离开 目标 元 泰 时 工具 提示 自动 隐藏 ， 如 果 不 希望 这 样 的 
效果 ， 就 设 为 false。 

口 title 作为 工具 提示 的 标题 文字 。 

D html HTML 文 本 片段 ， 作 为 工具 提示 的 显示 信息 。 


在 app.css 中 添加 CSS 代 人 码 ( capslock 样 式 类 ). 


.Capslockt 
background:url('../icons/bullet error.png') no-repeat center left; 
padding:2px; 
padding-left:20px; 
font-weight:700; 
} 


最 后 , 在 登录 控制 硕 里 做 些 调整 。 首 先 , 在 视图 (views ) 声明 中 , 添加 capsLockTooltip 
类 ,因为 我 们 在 view 目 录 里 建 了 个 子 日 录 , 如 果 只 是 简单 地 在 控制 硕 里 添加 一 个 capsLockTooltip 
视图 ， 控制 疾 是 不 会 识别 的 。 因 此 , 需要 按照 authentication. CapsLockTooltip 这 样 的 方式 
添加 ， 控 制 硕 才 能 识别 这 个 视图 类 是 在 view/authentication 目 录 下 。 


views: [ 
'Login', 
'authentication.CapsLockTooltip' 


] 了 


在 app 下 的 model、store、view 以 及 controller 目 录 里 ,会 有 很 多 我 们 需要 的 子 目 录 。 这 可 以 帮 
助 我 们 更 好 地 组 织 代码 ， 特 别 是 创建 大 应 用 系统 时 。 在 视图 、 控 制 器 、 存 储 器 以 及 模型 声明 中 ， 
也 需要 像 authentication. capsLockToolLtip 那 样 加 上 子 目录 名 称 。 


下 一 步 是 在 this .control 声 明 中 监听 keypress 事 件 : 


"lJogin form textfield[lname=password]": { 
keypress: this.onTextfieldKeypPress 
} 


Q 从 截图 可 知 ， 此 处 指 password 字 段 相 对 于 工具 提示 的 位 置 ， 比 如 本 例 中 设 为 Lop， 即 password 字 上 段 在 工具 提示 上 
方 。 一 一 译 者 注 
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我 们 要 使 用 的 选择 需 是 1ogin form textfield[name=password] 。 因 为 表单 中 有 两 个 文 
本 字段 ， 那 么 就 需要 用 某 种 方式 找到 password 字 段 ， 我 们 可 以 通过 name 属 性 达到 这 个 目的 。 


之 后 我 们 需要 在 控制 益 中 实现 onTextfieldKeyPress 方 法 : 


onTextfieldKeyPress: function(field, e, options) { 


Var charCode = e.getCharCode(); // #1 
if((e.shiftKkey && charCode >= 97 && charCode <= 122) || // #2 
(le.shiftKey && charCode >= 65 && charCode <= 90) ){ 
if(this.getCapslockTooltip() === undefined)t // #3 
Ext .widget('capslocktooltip'); // #4 
} 
this.getCapslockTooltip().show(); // #5 
} else { 
if(this.getCapslockTooltip() !== undefined)t // #6 
this.getCapslockTooltip() .hide().; // #7 


} 
} 
首先 ， 获 取 用 户 按键 的 识别 代码 (#1 )。 然 后 验证 是 否 按 下 Shift 键 的 同时 按 下 了 小 写字 母 键 
(a~z )， 或 者 Shift 键 没 按 下 但 按 下 了 大 与 字母 键 (A~Z ) ( 埠 )。 如 果 验 证 结果 为 ture， 意 味 着 大 写 
键 被 激活 。 如 果 想 了 解 每 个 键 的 识别 代码 ， 可 以 参考 http:/www.asciitable.comy。 


如 条 大 写 键 被 激活 ， 需 要 验证 是 否 已 存在 capsLockTooltip 类 的 引用 〈 雪 )， 如 有 果 不 存 在 ， 
就 用 它 的 xtype 创 建 一 个 引用 (#4 )。 


如 果 大 与 键 未 激活 ， 也 需要 验证 是 否 已 存在 CapsLockTooltip 类 的 引用 (#6 )， 如果 是 ,就 
隐藏 工具 提示 。 


最 后 一 个 细节 : 我 们 在 控制 希 中 并 没有 this .getcapslockTooltip() 的 引用 。 因 此 ， 需 
要 创建 它 : 


refs: | 


{ 


ref: 'capslockTooltip', 
selector: 'capslocktooltip' 


] 


ref (引用 ) 是 定位 组 件 的 另 一 选择 ， 使 用 componentouery (组 件 查 询 ) 语法 。ref 非 常 
有 用 ， 特 别 是 在 一 个 控制 希 里 面 要 多 次 获取 一 个 组 件 的 引用 时 。 控 制 硕 会 日 动 为 一 个 ref 生 成 一 
个 get 方 法 。 在 这 里 ， 控制 疾 为 我 们 生成 了 getcapslockTooltip 方 法 。 


现在 完成 大 写 键 提醒 功能 了， 我 们 可 以 保存 项 目 并 运行 测试 。 


2.7 小 结 


在 本 章 ， 我 们 一 步 步 详 细 介 绍 了 怎样 创建 登录 界面 。 内 容 包 括 怎 样 根据 Ext JS MVC 架 构 创 
建 登录 视图 和 控制 怖 ， 并 组 织 代码 结构 。 我 们 采用 了 表单 的 客户 端 验证 , 确保 发 送 可 接受 的 数据 
到 服务 需 端 ， 同 时 在 发 送 密 码 到 服务 器 端 之 前 对 其 进行 加 密 。 本 章 还 介绍 了 如 何 用 PHP 实 现 基 本 
登录 功能 ， 以 及 怎样 处 理 返 回 给 Ext JS 的 服务 器 端 数 据 。 

我 们 还 对 登录 ( Login ) 界面 进行 了 优化 ， 如 在 用 户 按 下 回 车 键 时 提交 表单 ， 在 password 
字段 显示 大 写 键 锁定 提醒 ,以 及 在 发 送 数据 到 服务 器 端 并 等 待 服务 需 端 返回 数据 的 过 程 中 , 给 表 
单 添 加 加 载 遮 时 。 

下 一 章 ， 我 们 将 继续 处 理 Login 界 面 ， 了 解 怎样 添加 多 语言 功能 ， 以 及 如 何 实现 广 销 和 会 话 
监控 功能 。 


注销 与 多 语言 文 持 


本 章 将 实现 系统 的 多 语言 支持 功能 。 这 个 功能 可 将 系统 显示 的 标签 内 容 翻 译 成 用 户 选 择 的 语 
言 文字 ( 其 中 会 用 到 一 些 HTML5 新 特性 )。 


我 们 还 将 实现 注销 功能 ,以 便 用 户 可 以 结束 会 话 。 出 于 安全 方面 的 考虑 ,我 们 还 将 实现 交互 
过 程 中 的 会 话 超时 警告 功能 〈 用 户 长 时 间 未 使 用 鼠标 或 键盘 的 情况 )。 


同时 ,用 户 认证 通过 后 需要 为 其 显示 应 用 界面 ,本 章 学 习 如 何 使 用 视 见 区 实现 基本 应 用 界面 。 


口 基本 应 用 界面 ; 

口 注销 功能 ; 

口 行为 监控 及 会 话 超时 警告 ; 
口 为 多 语言 文 持 组 织 应 用 结构 ; 
口 创建 语言 转换 组 件 ; 

口 实时 处 理 语言 转换 。 


3.1 基本 应 用 界面 


当 我 们 在 登录 控制 需 的 Submit 按 钮 监听 需 里 实现 success 图 数 时 ， 提 到 过 Packt .view. 
MyViewport 类 ,现在 就 来 实现 它 ( 在 view 目 录 下 创建 MyViewport.js 新 文件 )。 开 始 之 前 ， 先 看 一 
下 输出 界面 ， 如 下 页 所 示 。 


生成 上 面 所 述 图 的 代码 如 下 : 

Ext .qdqefline(' Packt.vIiew.MyViewport ' ，{ 
extend: 'Ext.container.Viewport', // #1 
alias: 'widget.mainviewport', // #2 
requires: | 


'Packt .view.Header' // #3 


支持 
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layout: { 
type: 'border' // #4 
人 
items: [ 
{ 
xtype: 'container', // #5 
width: 185, 


collapsible: true, 
region: 'west', 
style: 'background-color: #8FB488;' 


xtype: 'appheader', // #6 
region: ‘'north,' 


xtype: 'container', // #7 

region: 'center' 

xtype: 'container', // #8 

region: 'south', 

height: 30, 

style: 'border-top: lpx solid #4c72a4;', 
html: '<div id="titleHeader"><center><span 


style="fontsize:10px;">Mastering ExtJS pook - Loiane Groner - 
http://packtpub.com</span></center></div>' 
} 


}); 


站 Mastering Ext JS 
| 国 Mastering ExtJS [+ 


[二 地 localhost/masteringextjs/ 


Video Store Manager - Mastering Ext J 


Mastering ExtS book = Loiane Groner = nttp /packtpub.com 
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Packt .view.MyViewport 是 一 个 视 见 区 (#1 )， 视 见 区 是 一 个 特殊 容 侣 ， 表 未 可 视 应 用 区 
域 (浏览 器 视 见 区 ),， 将 自身 演 染 到 document body 里 ， 自 动 适 配 浏 览 器 显示 区 域 的 大 小 并 管理 
窗口 缩放 。 一 个 页 面 只 能 有 一 个 视 抑 区 。 同 时 ， 我 们 还 给 这 个 类 创建 了 一 个 别名 (加 )。 

MyViewpotrt 使 用 边界 布局 ， 边 界 布局 划分 成 五 个 区 域 : 上 、 和 下 、 左 、 右 以 及 中 央 区 域 。 中 
央 区 域 是 边界 布局 容器 中 唯一 强制 要 求 保 留 的 区 域 。 在 本 例 中 ， 我 们 不 使 用 右边 区 域 (#4 )。 


在 items 属 性 项 数组 中 , 声明 了 我 们 将 用 到 的 四 个 方位 的 组 件 。 第 一 个 组 件 是 位 于 左边 的 容 
器 ( 阁 )， 为 其 设置 宽度 ， 并 设置 为 可 收缩 形式 ， 以 便 用 户 可 以 更 好 地 查看 中 央 区 域 。 后 续 ， 我 
们 将 创建 动态 菜单 并 取代 该 容器 。 现 在 ， 先 用 浅 绿色 背景 标识 该 区 域 。 


语 Ar 


第 二 个 组 件 是 appheader ( #6 】 其 xtype 是 Packt .View.Header 类 , 在 这 个 Header 类 里 
将 实现 项 部 区 域 界面 功能 ， 包 括 应 用 程序 的 标题 以 及 注销 按钮 。 因 为 使 用 了 appheader 这 个 
xtype, 所 以 要 在 类 的 requires 声 明 里 添加 Packt .View.Header 类 (#3 )。 


第 三 个 组 件 是 中 央 区 域 容 各 (#7 )， 这 是 后 续 显 示 应 用 界面 的 地 方 ， 我 们 用 一 个 标签 面板 瞧 
代 它 。 最 后 一 个 组 件 项 是 为 一 个 容 融 ， 表 未 页 脚 (#8 )。 


现在 ， 我 们 来 实现 Packt .view .Header 类 ， 在 app/view 目 录 里 创建 名 为 Header.js 的 新 文件 : 


Ext .define('Packt.view.Header', { 
extend: 'Ext.toolbar.Toolbar', // #1 
alias: 'widget.appheader', // #2 


height: 30, // #3 
ui: 'footer', // #4 
style: 'border-bottom: 4px solid #4c72a4;', // #5 


items: | 
{ 
xtype: 'label', // #6 
html: '<div id="titleHeader">Video Store Manager<span 
style="font-size:12px;"> - Mastering Ext JS</span></div>' 
}, 
{ 
xtype: 'tbfill' // #7 
}, 
{ 
xtype: 'tbseparator' // #8 


xtype: 'button', // #9 
text: 'Logout', 
itemId: 'logout', 
iconCls: 'logout' 
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Header 类 扩展 日 Toolbar 类 (所 )， 给 它 分 配 别 名 〈 吉 )， 我们 在 MyvViewport 类 里 用 到 了 
这 个 别名 。 人 然后 ， 设 置 工具 柱 高 度 (# )， 并 设置 一 个 样式 效果 ，footer ui ( 扒 ) 使 得 按钮 在 
工具 栏 上 看 起 来 有 突起 效果 ,否则 工具 栏 跟 它 的 按钮 看 起 来 都 是 一 样 的 颜色 。 同 时 , 还 给 工具 栏 
设置 下 边线 样式 (#5 )。 


接 下 来 设置 items 属 性 项 : 第 一 个 是 标签 组 件 , 表示 应 用 系统 的 标题 (#6 )。 我 们 希望 Logout 
(注销 ) 按钮 在 工具 栏 的 右 侧 ， 因 此 知 要 添加 一 个 £i11 组 件 (#7 )。 然 后 ， 设 置 一 个 工具 栏 分 割 
条 ， 让 工具 栏 看 起 来 更 美观 些 (#8 )。 最 后 是 Logout 按 钮 ( #9 )。 


对 #7 行 和 #8 行 的 代码 ， 也 可 以 应 用 快捷 方式 ， 所 以 以 下 代码 : 


{ 


xtype: 'tbfill' // #7 
}, 
{ 

xtype: 'tbseparator' // #8 
} 


也 可 以 这 么 与 : 


二 // #7 
‘a 


结果 是 一 样 的 。 这 只 是 个 人 喜好 ， 比 如 ， 对 有 经 验 的 开发 者 而 言 ， 用 快捷 方式 声明 tpbfill1 和 
tbseparat or 组 件 显然 更 高 效 ， 但 还 在 进行 代码 维护 的 新 手 就 需要 积累 更 多 关于 快捷 方式 的 经 验 o 


最 后 ， 在 app.css 文 件 里 添加 一 个 新 的 样式 : 


#titleHeader { 
Color:#000; 
font-size:20px; 
font-weight:bold; 
font-family:'Lucida Grande', Arial, Sans; 


} 
现在 ,我 们 有 了 基本 的 应 用 界面 ， 后 续 革 市 里 将 不 断 对 其 进行 完善 。 


3.2 ”注销 功能 
既然 用 户 可 以 登录 系统 , 那么 他 们 也 应 该 可 以 注销 。 注销 是 在 登录 控制 器 里 最 后 实现 的 一 个 
功能 。 


首先 ， 在 控制 器 的 views 属 性 项 里 添加 Headqer 类 : 


views: [ 
'Login', 
'Header', 
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'authentication.CapsLockTooltip' 


] 


接 下 来 ， 在 this .control 声 明 里 添加 注销 按钮 的 点 击 事 件 监听 器 : 


"appheader button#logout": { 
click: this.onButtonClickLogout 
} 


作为 选择 需 ,， 我 们 使 用 appheader， 因 为 它 是 Logout 按 钮 所 在 的 工具 栏 的 xtype 属 性 值 , 使 
用 putton 是 因为 Logout 按 钮 是 按钮 类 型 (xtype:button ), #1oginout 使 用 了 其 对 应 的 jtemIqd 
值 。 这 样 可 以 确保 componentouery 获 取 的 按钮 正 是 我 们 需要 的 。 


现在 ， 实 现 欣 制 器 的 onButtonCc1lickLogout 方 法 : 
onButtonClickLogout: function(button, e, options) { 
Ext .Ajax.request(t{ 


url: 'php/logout.php', // #1 
success: function(conn, response, options, eOpts)t 


var result = Ext.JSON.decode (conn.responseText, true); 
if (!result)t 

result = {}; 

result.success = false; 

result.msg = conn.responseText; 


if (result.success) { // #3 


button.up('mainviewport') .destroy(); // #4 
window.location.reload(); // #5 
} 
else { 
Ext .Msg.show(t // #6 


title: 'Error!', 
msg: result.msg, 
licon: Ext.Msg .ERROR, 
buttons: Ext.Msg.OK 


failure: function(conn, response, options, eOpts) { 


Ext .Msg.show(t // #7 
title: 'Error!', 
msg: Conn.responseText, 
licon: Ext.Msg .ERROR, 
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buttons: Ext.Msg.OK 
}); 


一 
Se 


} 

我 们 将 实现 一 个 到 php/1logout .php〔( 很 快 就 要 创建 它 了 ) 的 Ajax 调 用 (#1 ),。 通常 ,需要 
处 理 success 和 failure 这 两 个 回调 函数 。 在 success 限 数 里 ,首先 解码 服务 问 病 啊 应 。 如 果 出 
钳 ， 就 创建 result 变 量 的 新 实例 来 处 理 服务 需 端 啊 应 。 如 果 成 功 ( 码 )， 获 取 mainviewport 引 用 
(Packt.view.MyViewport 类 )， 并 销毁 它 〈 释放 浏览 右 内 存 )， 同 时 ， 这 样 也 将 销毁 所 有 应 用 
组 件 〈 芭 )。 接 下 来 ,重新 加 载 应 用 并 回 到 登录 界面 ( #5 )。 

如 果 success 为 false， 就 用 出 错 信息 显示 一 个 错误 党 告 杠 (#6 )。 


fai 1ure 图 数 中 显示 错误 信息 ( #7 )。 


3.2.1 重 构 登录 和 注销 代码 


仔细 观察 发 现 ， 我 们 可 以 重用 Submit 按 钮 览 听 右 的 大 量 代码 。 这 里 “重用 ”一 词 并 不 贴切 ， 
实际 上 是 代码 复制 , 这 并 不 好 。 我们 如 何 维护 代码 并 只 进行 简单 调整 呢 ? 改动 所 有 需要 改动 的 地 
方 显 然 是 件 枯 燥 的 事情 。 这 就 需要 重 构 代 码 ， 并 按 可 重用 的 方式 创建 代码 。 


因此 ， 我 们 在 util 目 录 下 创建 一 个 新 的 Util 类 : Packt.util.Util。 


Ext .define('Packt .util.Util', { 
statics : { // #1 
decodeJSON : function (text) { // #2 

Var result = Ext .JSON.decode (text, true); 

if (!result)t 
result = {}; 
result.success = false; 
result.msg = text; 


} 


return result; 


小 
showErrorMsg: function (text) { // #3 
Ext .Msg.show(t 


title: 'Error!', 
msg: text, 
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LICcon: Ext.Msd.ERROR， 
buttons: EXL.MSsd .OK 


} 
}); 


所 有 的 方法 或 函数 都 是 静态 的 (#1 )， 从 而 避免 创建 类 实例 。 

首先 声明 decodeJSON 方 法 (起 )， 调用 decode 方 法 解码 服务 器 端 响 应 ， 并 处 理 因 出 错 导 致 
无 法 解码 服务 震 端 啊 应 的 情况 。 实 现 的 第 二 个 方法 是 showErrorMsg ( 雪 )， 简 单 显 示 一 个 市 有 
OK 按钮 和 出 错 图 标的 错误 警告 框 。 


回 到 登录 控制 器 ， 在 requires 声 明 中 添加 Packt .util.Util 类 。 接 下 来 ， 重 构 onButton 
ClickLogout 方 法 : 


onButtonClickLogout: function(button, e, options) { 


Ext .Ajax.request(t 
url: 'php/logout.php', 
success: function(conn, response, options, eOpts)t 


var result = 
Packt .util.Util.decodeJSON (conn.responseText).; 


If (result.success) { 


button.up('mainviewport') .destroy();} 
window.location.reload(); 
} 
else { 
Packt .util.Util.showErrorMsg (conn.responseText).;} 
} 
}, 
failure: function(conn, response, options, eOpts) { 
Packt .util.Util.showErrorMsg (conn.responseText).; 
} 
la 
} 


我 们 做 了 大 量 清 理 , 只 关注 跟 注 销 相 关 的 代码 。 代码 还 能 进一步 优化 , 但 就 目前 而 言 这 已 经 
足够 了 了。 也 可 以 对 onButtonCclickSupbpmit 方 法 进行 类 似 重 构 。 


重 构 看 起 来 好 像 没有 必要 ， 但 它 是 有 效 载 们 尺寸 最 小 化 ( minimizing the 

KY payload size，JavaScript 开 发 过 程 中 的 一 个 最 佳 实践 ， 也 是 Web 开 发 关注 话题 ) 的 

一部分。 可 通过 以 下 链接 了 解 更 多 关于 有 效 载 茶 尺寸 最 小 化 的 内 容 : 
https://developers.google.comyspeed/docs/best-practices/payload 。 
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3.2.2 ”服务 器 端 注销 功能 


我 们 在 php 目 录 下 创建 一 个 名 为 logout.php 的 PHP 新 页 面 ， 用 来 实现 服务 器 端的 注销 功能 ， 其 
代码 非常 人 简单: 


<?php 

session_ start(); // #1 

S_SESSION = array(); // #2 
session destroy(); // #3 

Sresult = array(); // #4 
sresult['success'] = true; 
Ssresult['msg'] = 'logout'; 

echo JjJson encode(S$sresult); // #5 
?> 


首先 重启 会 话 (#1 )， 之 后 释放 所 有 会 话 变 量 ( 埠 )、 销 筑 会 话 ( 塌 )。 最 后 ,返回 信息 给 Ext 
JS 告知 会 话 被 销毁 (#、#5 )。 


这 样 ， 我 们 就 实现 了 服务 上 益 问 注销 功能 。 


3.2.3 客 亡 端 行为 监控 


让 我 们 进一步 丰 军 应 用 的 功能 。 有 一 点 很 重要 ， 那 就 是 告知 用 户 Web 应 用 有 超时 设置 ， 出 

于 安全 考虑 不 能 在 用 户 离 开 的 情况 下 保持 长 时 间 登 录 状 态 。 服 务 带 病 语 言 能 够 实现 超时 控制 ， 

- 晶 用 户 登 录 ， 出 于 安全 考虑 ， 服 务 右 端 不 可 以 无 条 件 地 一 直 “ 记 着 ”他 ， 这 也 是 添 加 这 个 功 
能 的 原因 。 


我 们 考虑 用 一 个 插件 来 实现 此 功能 ,这 个 插件 叫 Packt .util.SessionMonitor, 是 基于 Sencha 
市 场 的 Activity Monitor 搬 件 ( https://market.sencha.com/extensions/extjs-activity-monitor )。 一 
段 时 间 后 ( 默认 是 15 分 钟 示 操作 )， 插 件 会 显示 信息 询问 用 户 是 否 要 继续 保持 激活 。 如 果 是 ， 插 
件 发 送 一 个 Ajax 请 求 到 服务 融 端 ， 服 务 希 端 将 维持 会 话 ; 如 果 在 信息 显示 的 60 秒 内 用 户 未 作出 反 
应 ， 应 用 就 目 动 注销 。 


读者 可 以 从 https://github.com/loiane/masteringextjs/blob/master/app/util/SessionMonitor.js 获 取 
插件 源 代码 。 


如 朱 想 改变 未 进行 操作 的 时 间 间 隅 ， 只 需 改变 maxInactive 设 置 即 可 。 
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要 开始 监控 会 话 ， 需 在 登录 控制 大 onButtonC1lickSsubmit 方 法 的 MyViewport 类 实例 化 代 
人 码 之 后 添加 以 下 几 行 代码 : 


Ext .create('Packt .view.MyViewport'); 
Packt.util.SessionMonitor.start():; 


sessionMonitor .js 的 第 42 行 ， 调 用 了 一 个 名 为 php/sessionAlive.php 的 文件 。 我 们 需要 在 
php 目 录 下 创建 这 个 文件 ， 并 实现 如 下 代码 : 
<?php 


session Start () : 
了 > 


上 述 实 


现 仅 维持 了 服务 骨 站 会话 并 重 设 15 分 钟 计 时 间隔 。 
运行 程序 并 保持 1 分 钟 的 无 操作 状态 ， 可 以 看 到 以 下 截图 信息 : 


Session Timeout Warning 


Your session Will automatically expires after 15 minutes 
of inactivity, If your session explires, any UNnsaved data 
will be lost and You Will be automatically logged out. 


If you Want to continye working, cliek the Continue 
Working’ button， 


YoOUr session Wi expire im S51 seconds. 


Continue Working Logout 


ExtJS 并 未 目 市 此 功能 ， 但 如 我 们 所 见 ， 很 容易 实现 该 功能 并 将 捅 件 应 用 于 其 他 ExtJS 项 目 。 


3.3 多 语言 文 持 


我 们 的 产品 很 可 能 会 远 销 海外 , 这 时 候 系 统 具备 语言 转换 能 力 束 显 得 很 午 要 了 , 毕竟 不 是 所 
有 用 户 都 使 用 同一 种 语言 。 本 市 ,我 们 就 来 实现 一 个 具备 标签 语言 转换 功能 的 多 语言 组 件 。 本 市 
功能 完成 时 ， 界 面 将 如 下 所 未: 


Login 


User: laiane 


下 Engish ~ cnal bmnk 
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我 们 的 想法 是 在 本 地 存储 用 户 语 言 修好 , 以 便 下 一 次 用 户 加 载 应 用 程序 时 , 自动 显示 首选 语 
言 。 而 当 用 户 改 变 语言 时 ， 应 用 程序 需要 被 重新 加 载 ， 以 使 新 的 翻译 可 以 加 载 到 存储 带 中 。 


3.3.1 创建 语言 转换 组 件 


仔细 看 本 市 开头 的 图 , 就 会 注意 到 语言 转换 组 件 是 个 按钮 ,点击 祥 头 会 弹出 一 个 大 有 语言 可 
选项 的 末 单 。 


市 有 箭头 的 按钮 叫 分 割 按钮 ( Split button ) 组 件 , 它 有 个 菜单 , 每 种 语言 作为 一 个 菜单 ( Menu ) 
项 。 接 下 来 ,创建 一 个 Packt .view.Translation 类 ,包含 我 们 描述 的 这 些 特性 。 在 app/view 
目录 下 创建 一 个 名 为 Translation.js 的 新 文件 : 


Ext .define('Packt.view.Translation', { 
extend: 'Ext.button.Split', // #1 
alias: 'widget.translation', // #2 
menu: Ext.create('Ext.menu.Menu', { // #3 
items: I[ 
{ 
xtype: 'menuitem', // #4 
liconCls: 'en', 
text: 'English' 


xtype: 'menuitem', // #5 
liconCls: 'es', 
text: 'Espafiol' 


xtype: 'menuitem', // #6 
iconCls: 'pt_BR', 
text: 'Portugués' 


) ) 
}); 
创建 的 类 扩展 自 splitbutton (#1 ),。 Splitbutton 类 提供 了 一 个 内 置 下 拉稀 头 , 并 可 触发 
与 默认 按钮 点 击 事件 不 同 的 事件 。 典 型 的 就 是 显示 一 个 下 拉 荣 单 ， 提 供给 主 按钮 更 多 可 选项 。 我 
们 分 配 一 个 别名 给 它 (# )。 


在 menu 属 性 配置 项 里 创建 一 个 Menu 类 的 实例 〈 码 )，items 里 是 每 种 转换 语言 选项 ， 有 : 转 
换 成 喘 语 的 选项 (机 )， 显 示 美 国旗 标 ; 转换 成 西班牙 二 的 选项 (#5 )， 显示 西班牙 着 标 ; 转换 成 
和 芽 萄 牙 语 的 选项 (#6 )， 显 示 巴 西 旗 标 。 


还 可 以 染 加 我 们 需要 的 各 种 请 言 选 项 ， 对 于 每 一 种 转换 语言 选项 ， 只 需要 添加 一 个 新 的 沫 
单项 。 


下 一 步 ， 在 app.css 中 为 iconcls 添 加 添加 CSS 样 式 : 


.DtL_BR { 
background-image:url('../flags/br.png') 

} 

.en { 
background-image:url('../flags/us.png') 

} 

.es { 
background-image:url('../flags/es.png') 


} 


!important; 


!important; 


!important; 
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组 件 现在 初 具 锥 形 ( 只 能 展现 给 用 户 而 已 ), 我 们 会 在 项 目的 两 个 地 方 使 用 了 语言 


登录 界面 以 及 顶部 区 域 工具 栏 的 Logout 按 钮 前 面 。 


首先 ， 在 登录 界面 添加 这 个 组 件 。 再 次 打开 Packt .view.Login 类 ， 作 为 工具 栏 第 一 个 子 


组 件 项 添加 这 个 组 件 ， 使 其 看 起 来 像 本 市 开头 图 示 那 样 : 


items: [| 
{ 


xtype: 'translation' 


xtype: 'tbfill' 


] 


别 丰 了 在 登录 界面 类 的 requires 声 明 里 添加 这 个 类 : 


requires: | 
'Packt .view.Translation' 


] ， 


接 下 来 在 Packt .view.Header 类 里 进行 同样 的 工作 ,在 工具 栏 fi11 组 件 后 面 添 加 语言 转换 


组 件 。 


{ 

xtype: 'tbfill' 
}, 
{ 

xtype: 'translation,' 
}, 
{ 

xtype: 'tbseparator' 
} 


前 面 也 有 这 个 组 件 : 


转换 组 件 : 


如 有 果 我 们 这 时 候 运 行程 序 ， 可 以 看 到 登录 界面 有 语言 转换 组 件 了 ,登录 后 ,在 Logout 按 钮 的 
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Mastering ExtJ3 


6 nealD es otasering es 1 | {Ee [sa 


Video Store Manager - Mastering Extjs | Logout 


Mastering ExtJs book — Loiane Groner 一 http:/ /packtpub.com 


3.3.2 ”创建 转换 文件 


我 们 需要 在 项 目 中 保存 转换 信息 ,分 别 保存 每 一 种 语言 的 转换 信息 到 相应 JavaScript 文 件 里 ， 
并 放 在 translations 目 录 下 。 由 于 打算 用 iconcls 的 值 加 载 转换 文件 , 就 需要 创建 3 个 名 为 en.js、es.js 
以 及 pt_BR.js 的 文件 。 每 个 文件 中 ， 都 将 创建 一 个 名 为 Lranslations 的 JavaScript 对 象 ， 这 个 对 
象 的 每 个 属性 就 是 一 条 转换 信息 ， 所 有 的 转换 文件 都 是 这 样 ， 唯 一 不 同 的 是 转换 信息 的 内 容 。 


例如 ， 以 下 是 en.js 的 代码 : 


translations = { 
login: "Please Login", 
user: "User", 
password: "Password", 


cancel: "Cancel", 
submit: "Submit", 


logout: 'Logout', 


capsLockTitle: 'Caps Lock is On', 


capsLockMsgl: 'Having Caps Lock on may cause you to enter your password', 
capsLockMsg2: 'incorrectly.' 
capsLockMsg3: 'You should press Caps Lock to turn it off pefore entering', 


capsLockMsg4: 'your password.' 


} 
以 下 是 pt_BR.js 人 代码， 包含 了 葡萄牙 语 的 转换 信息 : 


translations = { 
login: "Facga o Login", 
user: "Usuério", 
password: "Senha", 


cancel: "Cancelar", 
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submit: "Enviar", 
logout: 'Logout', 


capsLockTitle: 'Caps Lock esta ativada', 

capsLockMsgl: 'Se Caps lock estiver ativado, isso pode fazer com gque vocé', 
capsLockMsg2: 'digite a senha incorretamente.,' 

capsLockMsg3: 'Vocé deve pressionar a tecla Caps lock para desativé-la', 
capsLockMsg4: 'antes de digitar a senha.' 


} 


文件 格式 都 一 样 ， 仅 是 转换 信息 不 同 。 随 春 应 用 的 完善 ,将 不 断 添加 转换 信息 ， 这 是 一 种 组 
织 文 件 的 好 方式 ， 方 便 我 们 后 续 更 改 转换 信息 。 


3.3.3 ”使 用 转换 信息 


要 在 组 件 中 应 用 这 些 转 换 信 息 ， 我 们 还 需 继续 努力 ， 用 translation.property 方 式 蔡 代 
将 呈现 在 标签 上 的 字 弟 。 


比如 ，Packt.view.Login 类 里 有 窗 体 的 标题 、 用 户 名 和 密码 的 标签 信息 ( fieldLabel 7 
以 及 Cancel 和 Submit 按 钮 的 显示 标签 。 要 将 转换 文件 中 的 转换 信息 应 用 到 这 些 标签 上 面 没 这 
容易 。 

用 以 下 代码 蔡 代 登录 窗 体 的 title 设 置 : 

title: translations.1login, 

用 以 下 代码 符 代 用 户 名 字段 的 tieldLabe1 设 置 : 

fieldLabel: translations.user， 

用 以 下 代码 蔡 代 用 密友 字段 的 fieldqLabel 设 置 : 

fieldLabel: translations.password， 

用 以 下 代码 替代 用 Cancel 按 钮 的 text 设 置 : 

text: translations.cancel 

用 以 下 代码 替代 用 Submit 按 钮 的 text 设 置 : 


text: translations.submit 


以 此 类 推 ， 我 们 也 可 以 为 Logout 按 钮 ， 力 至 CapsLockTooltip 类 应 用 转换 信息 。 


3.3.4 HTML5 本 地 存储 


我 们 的 转换 组 件 实现 思路 是 为 用 户 存储 一 些 语言 偏好 ( 指 转换 信息 )。 可 以 用 cookie 来 实现 ， 
但 这 想法 并 不 成 就 ,cookie 需 要 依赖 HTTP 请 求 。 我 们 想 要 长 期 保存 这 些 信息 ,并 寻求 一 种 不 受 页 
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面 刷新 甚至 关闭 浏览 俘 影 响 的 实现 方式 。 这 种 完美 的 方式 就 是 使 用 本 地 存储 (Local Storage ) 
HTML5 的 一 个 新 特性 。 


Ext JS 已 通过 Localstorage 代 理 实现 了 对 本 地 存储 的 支持 。 我 们 想 要 更 人 简单 的 方式 ， 而 在 
编码 中 使 用 HTML5 特 性 本 就 是 一 种 简便 化 方式 ， 同 时 也 能 论证 一 下 其 他 APIs 跟 Ext JS API 的 协 
作 性 。 


并 非 所 有 浏览 大 都 文 持 本 地 人 存储， 提供 文 持 的 浏览 项 有 : IE 8.0+、Firefox 3.5+、Safari 4.0+、 
Chrome 4.0+、Opera 10.$+、iPhone 2.0+ 以 及 Android 2.0+。 后 面 会 创建 一 个 友好 页 面 提示 用 户 升 
级 浏览 器 。 我 们 也 会 在 其 他 界面 中 融合 应 用 ExtJS 和 更 多 的 HTML5 特 性 。 现 在 ,我 们 需要 了 解 待 
实现 的 代码 并 非 在 所 有 浏览 人 各 里 都 能 运行 。 


厂 想 了 解 更 多 关于 HTML5 存 储 的 信息 ， 请 访问 http://diveintohtml5.info/storage.html。 


在 translations 目 录 里 创建 名 为 locale.js 的 新 文件 ， 实 现代 码 如 下 : 


Var lang = localStorage ? (localStorage.getIitem('user-lang') | | 'en') : 'en'; 
Var file = 'translations/' + lang + '.JS'; 
document .write('<script type="text/jJavascript" src="' + file + '"></script>'); 


首先 ， 判断 localstorage 代 理 是 否 可 用 。 如 果 可 用 ， 则 判断 在 localstorage 中 是 否 有 名 
为 user-lang 的 项 ， 如 果 该 项 不 存在 则 默认 使 用 英语 。 如 果 localstorage 不 可 用 ， 也 默认 使 用 


英语 。 
然后 ， 创 建 ftile 变 量 ， 用 来 放置 应 用 需 加 载 的 转换 文件 的 路 径 。 
最 后 , 我 们 把 选择 的 转换 文件 加 到 index.html 页 面 中 去 , 需 在 index.html 文 件 里 添加 以 下 代码 : 


<script src="translations/locale.js"></script> 


这 行 代码 添加 我 们 创建 的 locale.js。 当 浏览 右 加 载 index.html 页 面 时 ， 脚 本 将 被 执行 ， 应 用 加 
载 后 ， 多 语言 文 持 功 能 就 可 以 使 用 了 。 


3.3.5 ”实时 的 语言 切换 


现在 转换 组 件 的 实现 到 了 尾声 ， 当 用 户 选 择 不 同 语言 时 ， 需 要 重新 加 载 整个 应 用 以 使 
translations/locale.js 表 次 执行 ， 并 加 载 相应 的 新 语言 。 


我 们 需要 创建 一 个 新 的 控制 大 处 理 转换 组 件 ， 这 个 新 的 控制 希 类 名 为 Packt .controller. 
TranslationManager， 因 此 ， 在 app/controller 目 录 下 创建 名 为 TranslationManager.js 的 新 文件 。 


在 这 个 控制 关中 ， 需 监听 两 个 事件 : 一 个 由 转换 组 件 目 号 触发 ， 力 一 个 由 菜单 项 触发 。 


Ext .define('Packt.controller.TranslationManager', { 
extend: 'Ext.app.Controller', 


views: [| 
'Translation' // #1 


ref: 'translation', // #2 
selector: 'translation' 


] ， 


init: function(application) { 
this.controll(t 
"translation menuitem": { // #3 
click: this.onMenuitemClick 


}, 
"translation": { // #4 
beforerender: this.onSplitbuttonBeforeRender 


}); 
} 
}); 
和 首先， 在 views 声 明 转 换 组 件 〈 刘 )， 作 为 控制 硕 的 视图 ， 我 们 需要 控制 硕 负 责 转换 组 件 的 
所 有 事件 触发 。 然 后 ， 创 建 转换 组 件 的 引用 ， 转 换 组 件 的 xtype 为 translation， 所 以 命名 ref 
为 translation (# 妃 )。 有 了 了 ref 声明 ， 欣 制 器 会 日 动产 生 getTranslation 方 法 ， 通过 它 可 以 
获取 转换 组 件 的 引用 。 


下 一 步 束 开始 监听 我 们 感 兴趣 的 事件 了 。 首 和 完 ， 逢 要 监听 转换 组 件 的 beforerender 事 件 
(#4 )， 转 换 组 件 是 一 个 Split (分割 ) 按钮 。beforerender 事 件 在 分 割 按钮 被 泻 染 前 触发 。 我 们 
想 要 的 动作 是 基于 用 户 的 语言 选择 , 并 设置 用 户 所 选 语 言 的 图 标 以 及 名 称 。 第 二 个 监听 事件 是 且 
单项 的 点 击 (# )。 当 用 户 点 击 某 个 菜单 选项 时 ， 我 们 需要 设置 事先 在 localStorage 里 的 新 语 
言 ， 改 变 Split 按 钮 的 图 标 和 文本 ， 并 重新 加 载 应 用 。 


先 看 看 onSplitbuttonBeforeRender 方 法 : 


onSplitbuttonBeforeRender: function(abstractcomponent, options) { 


Var lang = localStorage ? (localStorage.getIitem('user-lang') | | 'en') : 'en'; // 
#5 

abstractcomponent.iconCls = lang; // #6 

if (lang == 'en') { // #7 


abstractcomponent.text = 'English'; // #8 
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} else if (lang == 'es')t 
abstractcomponent.text = 'Espafiol'; 

} else { 
abstractcomponent.text = 'Portugués'; 


} 
} 


首先 判断 浏览 融 是 否 文 持 1ocalStorage， 如 果 文 持 ， 则 可 以 操作 语言 本 地 存储 特性 。 如 果 
不 支持 ,或 者 语言 偏好 尚未 设置 (用户 初次 使 用 应 用 或 用 户 尚未 改变 语言 的 情况 下 )， 默 认 语言 
为 英语 (#5 )。 然 后 ， 设 置 分 审 按 钮 的 iconcls 为 所 选 语言 对 应 的 旗 标 (#6 )。 


如 果 选 择 语言 是 英语 , 则 设置 Split 按 钮 文本 为 “English”( #7 ); 西班牙 语 则 设置 为 “Espafiol” 
(#8 ); 衔 萄 牙 语 则 设置 为 “Portugues ”。 


现在 来 看 onMenuitemClick 方 法 : 


onMenuitemClick: function(item, e, options) { 
Var menu = this.getTranslation(); // #9 


menu.setIconCls (item.iconCls); // #10 
menu.setText (item.text).; // #11 


localStorage.setIitem("user-lang", item.iconCls); // #12 


window.location.reload(); // #13 


} 

首先 ， 获 取 translation 组 件 的 引用 (加 )。 然 后， 设置 Split 按 钮 的 Iconcl1s 和 沫 单项 文本 
(#10 和 和 #11 )。 下 一 步 ， 设 置 用 户 选 择 的 对 应 1ocalstorage 里 的 新 语言 (#12 )， 最 后 重新 加 载 页 
面 (#13 )。 


别 忘 了 在 app.js 文 件 的 controllers 声 明 中 添加 一 个 新 的 控制 磊 : 


controllers: | 
'Login', 
'TranslationManager 


] 


执行 程序 并 更 改 俩 好 语言 ， 我 们 可 以 发 现 界面 语言 也 随 之 发 生 转 变 : 


3 Faga o Login 22 Login 
Usuario: Ioiane Usuario: laiane 
Senha: TTTT Contraselia: soreee 


Portuguas ~ 六 cancelar ,万 Enviar 一 Epaiiol ~ 全 Cancelar Enwiar 
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3.3.6 ”本 地 化 : Ext JS 语言 转换 


还 漏 了 一 件 事 ， 我 们 只 转换 了 应 用 系统 的 标签 信息 。 作 为 Ext JS API 一 部 分 的 错误 信息 或 其 
他 信息 并 没有 转换 。 但 ExtJS 提 供 了 本 地 化 文 持 ,， 要 做 的 仅仅 只 是 把 JavaScript 的 locale 文 件 ( 本 地 
化 文件 ) 添加 到 HTML 页 面 。 把 以 下 代码 添加 到 translations/locale.js 文 件 中 : 


Var extjsFile = 'extjs/locale/ext-lang-' + lang + '.JS'; 
document .write('<script type="text/javascript" src="' + extjsFile + '"></script>'); 


试 着 再 次 执行 程序 ， 就 会 发 现 所 有 的 Ext JS 信 息 都 被 转换 了 。 例 如， 如 末 转 换 语 言 为 西班牙 
表单 的 验证 错误 信息 也 将 转换 成 西班牙 语 : 


1 


3 


ES Login ES Login 


Usuario: Usuario: 


入 This field is required 


Contraseiia: 


Contrasefia: | ad 


各 The minimum length for this field is 3 El tamaiio minimo para este campo es de 3 


Epafiol ~ 其 | Cancelar 深 Enwial Espaiiol ~ 其 | Cancelar 党 Enwial 


现在 ,应 用 系统 的 转换 功能 全 部 完成 了 ! 当 用 户 改 变 请 言 选择 时 ,重新 加 载 应 用 的 原因 之 一 
在 于 为 了 重新 加 载 正 确 的 本 地 化 文件 。 


3.4 小结 
我 们 实现 了 本 书 应 用 案例 的 基本 功能 ， 并 实现 了 注销 按钮 《ExtJS 客 户 病 实 现 以 及 服务 大 痊 
实现 )。 同 时 ， 我 们 还 实现 了 行为 监控 以 及 会 话 超时 控制 功能 。 


最 后 , 我 们 掌握 了 如 何 融 合 HTML5 特 性 与 Ext JS 创 建 语言 转换 组 件 ， 以 实时 转换 应 用 程序 的 
标签 信息 及 侯 好 博 言 。 


本 章 我 们 进一步 丰富 了 应 用 程序 的 功能 ,新 文件 越 来 越 多 , 应 用 也 越 来 越 复 杂 。 后 续 各 章 还 
会 创建 更 多 的 文件 和 组 件 。 


下 一 章 ， 我 们 将 学 习 怎 样 用 折 梧 面板 和 树 形 面板 创建 动态 菜单 。 


在 第 2 草 中 ， 我 们 已 经 实现 了 登录 功能 ， 现 在 需要 实现 主 界面 功能 。 首 和 允 要 实现 的 是 动态 
蘑 单 功能 : 用 户 权 限 不 同 ， 在 某 单 中 展现 出 来 的 茶 单 项 也 不 同 。 一 旦 用 户 通 过 了 认证 ， 将 进 
入 应 用 系统 的 主 界面 ， 主 界面 由 采用 框 线 分 隅 布局 的 视 见 区 构成 ， 在 视 见 区 左边 将 展示 一 个 


菜单 。 


在 界面 泻 染 上 , 可 以 泻 染 所 有 的 系统 界面 元 系 ,， 然后 根据 不 同 的 用 户 角 色 , 隐藏 或 显示 这 些 
界面 元 素 。 但 在 本 书 中 , 我 们 并 不 采用 这 种 方式 ， 只 泻 染 和 展示 用 户 能 访问 的 那些 界面 元 系 ， 方 
法 就 是 根据 用 户 的 访问 权限 动态 浑 染 沫 单 。 


我 们 将 学 会 通过 折 车 面板 ( Accordion panel ) 和 树 形 面板 〈Tree panel ) 展示 动态 末 单 一 一 
个 更 复杂 的 动态 菜单 。 本 章 介 绍 以 下 内 容 : 


口 通过 折 革 面板 和 树 形 面 板 实现 动态 菜单 ; 
口 通过 hasMany 绑 定 从 服务 硕 端 加 载 数 据 ; 
口 在 服务 部 端 处 理 动态 沫 单 ; 

口 动态 打开 荣 单 项 。 


4.1 创建 动态 菜单 


本 童 创 建 的 第 一 个 组 件 是 动态 荣 单 。 只 用 树 形 面板 也 可 以 展示 菜单 , 但 我 们 希望 干 些 有 挑战 
性 的 工作 ,用 折 炙 面板 和 树 形 面板 实现 一 个 增强 版 动态 茉 单 ， 从 而 给 用 户 更 好 的 体验 。 系 统 由 各 
个 模块 构成 ， 每 个 模块 又 有 右 干 子 项 ， 点 击 子 项 呈现 对 应 的 界面 。 折 车 面板 用 来 呈现 这 些 模块 ， 
通过 它 ， 用 户 可 逐一 展开 每 个 模块 并 看 到 其 子 项 ( 六 单项 )。 每 个 模块 的 子 项 ， 用 树 形 面 板 来 实 
现 , 树 市 点 就 是 每 个 于 项 。 


最 终 ， 我 们 的 动态 末 单 如 下 图 所 示 : 


Mastering Ext js 


Mastering Ext JS "2 


Video Store Manager - Mastering Ext Js 到 English > | 时 | Logout 
| 全 home 


Mastering Extjs book - Loiane Gronmer - http:/ /packtpub.com 


4.1.1 数据库 模 型 :用户 组 、 菜 单 及 权限 


我 们 已 经 创建 了 User 表 和 Groups 表 ， 为 了 存储 荣 单 和 沫 单项 的 内 容 ， 以 及 每 个 用 户 组 的 对 
应 权限 ， 需 要 再 创建 两 个 数据 库 表 ， 即 Menu 表 和 Permissions 表 ， 如 下 图 所 示 : 


Ss name VAACGHARTTOO! 
SusetName VARCHARROY 


FNT 


站 了 i password VARCHARITOO) 
站 HU Tr Name ] 

3 text VARCHARI4S) 2 二 % emailVARCHARI100) 
Dt re et 二 三 一 一 4 3 picture VARCHARI1OO) 


< parent_id INT FY Grmoup_id INT 
ClassName VARCHARALAS) 


bb 


Menu 表 里 存储 所 有 的 表单 信息 ， 每 一 个 菜单 项 都 将 作为 树 形 面板 里 的 树 节 点 ， 这 就 要 求 信 
息 的 存储 形式 应 当 与 树 形 面板 适 配 。 因 此 ，Menu 表 里 : id 字 段 表 示 树 节点 ，text 字 段 表示 树 节 
点 显示 的 文字 描述 ( 在 本 例 中 ， 因 为 应 用 了 多 语言 支持 功能 ， 将 存储 语言 转换 文件 的 属性 ); 
iconcls 罕 段 表示 树 节 点 图 标 要 用 的 CSS 类 ; className 字 段 表示 将 动态 实例 化 的 类 的 alias 
(或 xtype ) 属性 ， 实 例 化 后 的 界面 组 件 呈现 在 系统 中 部 位 置 标签 面板 里 ; parent_idq 字 段 表示 
父 节 点 ?”( 有 时 没有 该 字段 ,模块 是 没有 parent_id 的 ， 而 模块 的 子 项 有 parent_igq， 即 模块 )。 


此 外 ,由 于 Menu 表 与 Gbroups 表 之 间 是 N:N( 多 对 多 ) 的 关系 , 我 们 设计 了 一 个 Permissions 
表 来 描述 这 种 关系 。 下 一 章 会 进一步 讨论 如 何 分 配 用 户 到 用 户 组 中 去 。 


我 们 用 下 列 SQL 脚 本 创建 Menu 和 Permissions 这 两 个 新 表 : 


J 原文 是 根 节 点 ， 应 该 是 父 节 点 比较 合适 ， 只 不 过 本 例 中 的 父 节点 即 是 根 节 点， 因为 只 有 二 级 层次 。 一 一 译 者 注 
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USE ‘sakila  ; 
CREATE TABLE IF NOT EXISTS ‘sakila '. Menu ( 
id. INT NOT NULL AUTO INCREMENT  ， 
text VARCHAR(45) NOT NULL ， 
‘jconCls VARCHAR(15) NULL ， 
‘parent id INT NULL ， 
‘className VARCHAR(45) NULL ， 
PRIMARY KEY (id ) ， 
INDEX ‘fk Menu Menu ( parent id ASC) ， 
CONSTRAINT “fk Menu Menu. 
FOREIGN KEY (‘parent id、 ) 
REFERENCES ‘sakila . Menu ( id ) 
ON DELETE NO ACTION 
ON UPDATE NO ACTION) 
ENGINE = InNnnoDB; 
CREATE TABLE IF NOT EXISTS ‘sakila'. Permissions  ( 
‘Menu id INT NOT NULL ， 
“Group_ idq ”INT NOT NULL ， 
PRIMARY KEY (人 Menu idq`， ‘Group id、) ， 
INDEX ‘fk Menu has_Group_Group1 (‘Group_ id ASC) ， 
INDEX ‘fk Menu has Group Menul  ( Menu id ASC),, 
CONSTRAINT “fk Menu has_ Group Menul. 
FOREIGN KEY (Menu id. ) 
REFERENCES ‘sakila . Menu ( id ) 
ON DELETE NO ACTION 
ON UPDATE NO ACTION, 
CONSTRAINT ‘fk Menu has_ Group_ Groupl. 
FOREIGN KEY (Group _ id ) 
REFERENCES ‘sakila . Groups ( .id ) 
ON DELETE NO ACTION 
ON UPDATE NO ACTION) 
ENGINE = InNnnoDB; 


接 下 来 ,需要 给 Menu 表 和 Permissions 表 填充 一 些 数据 。 为 了 能 够 顺利 完成 后 续 的 安全 模 
块 ， 还 需要 生成 3 个 菜单 项 ， 现 在 ，className 先 设 为 “panel1”( 表示 是 一 个 banel 类 型 )， 以 
方便 测试 。 

INSERT INTO ‘sakila '. menu (id', ‘text , ‘iconCls ) 

VALUES (1, 'menul', 'menu admin').; 


INSERT INTO ‘sakila . menu (id, ‘text’, ‘iconCls , ‘parent id’, ‘className ) 


VALUES 
(2, 'menul1l', 'menu groups', 1, 'panel'), 
(3, 'menul2', 'menu users', 1, 'panel'); 


INSERT INTO ‘sakila . Permissions ( Menu id’, ‘Group iqd) 
VALUES ( ys (m2 "fy ; ("3 TE 


4.1.2 ”创建 菜单 模型 : hasMany 绑 定 
现在 可 以 开始 编码 了 。 首 先 ， 建 立 一 个 从 服务 器 端 加 载 菜单 数据 的 模型 类 ， 类 名 为 : 
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Packt .model .menu .Root。 在 app/model 目 录 下 新 建 一 个 子 日 录 menu , 然后 创建 一 个 名 为 Root.js 
的 文件 ，Packt .model .menu .Root 类 实现 代码 如 下 所 示 : 


Ext .define('Packt.model .menu.Root', f{ 
extend: 'Ext.data.Model', 


uses: | 
'Packt .model .menu.Item’' 


] ， 


lidProperty: 'id', 


fields: [| 
{ 
name: 'text' 
}, 
{ 
name: 'iconCls' 
}, 
{ 
name: 'id' 


hasMany: { 
model: 'Packt.model .menu.Item', 
foreignKey: 'parent id', 
name: 'items,' 


})3 


需要 为 这 个 类 提供 的 信息 有 : 面板 标题 ( text )、iconcls 和 id 等 属性 。Root 类 有 一 个 
hasMany 绑 定 类 Packt .model .menu.Item,， 表示 树 形 面板 的 每 个 树 节 点 。 设置 hasMany 绑 定 的 
name 属 性 为 tems ，ExtJS 会 创建 一 个 名 称 为 tems 的 方法 ， 这 样 就 可 以 取 回 menu .Item 类 的 集 
合 。 现 在 来 实现 Packt .model .menu.Item 类 : 


Ext .aqeflne(': Packt.modqe1l .menu.Item', 
extend: 'Ext.data.Model', 


uses: | 
'Packt .model .menu .Root' 


] ， 
idProperty: 'id', 


fields: [| 
{ 
name: 'text' 
上 
{ 
name: 'iconCls' 


} 了 


nAame.: 


nAame.: 


nAame.: 


belongsTo: { 
model: 


foreignKey: 


}); 


这 个 类 表示 树 形 面板 的 某 个 树 节点 ， 根据 Menu 表 的 字段 声明 fielgds 属 性 ， 因 此 ， 对 应 的 字 
段 有 : text、iconCls、className、 id 和 和 parent_id。 parent_idqd 字 段 对 应 menu .Root 的 外 
键 。menu.Root 类 有 个 hasMany 绑 定 ， 而 menu.Item 类 有 个 逆向 作用 的 pelongsTo 绑 定 : 
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'ClassName' 


1'jd! 


'parent_1id' 


'Packt .model .menu.Root', 


'parent_id' 


menu . Item 类 通过 它 取 回 menu .Root 类 。 


有 了 这 些 模型 ( menu .Root 和 menu .Item) 和 绑 定 (hasManv 绑 定 和 belongsTo 绑 定 )， 整 
可 以 从 服务 融 端 获 取 衣 套 数据 ， 以 下 的 JSON 格 式 数 据 ， 表 示 从 menu .Root 类 和 menu .Item 类 获 


取 的 数据 : 


"items": [{ 

Tiare v1Y, 

"text": "menul", 

"jconCls": "menu admin", 

"Parent _ id": null, 

"className": null, 

"leaf": false, 

"items": [{ 
Wa WG 
"text": "menull", 
"liconCls": "menu groups'", 
"Parent 1id": "1", 
"className": "panel", 
"leaf": true 

}, { 
"id": "3", 
"text": "menul2", 
"iconCls": "menu users", 
"Parent 1id": "1", 
"className": "panel", 
"leaf": true 

}; A 
Ta rs WAT 
"text": "menul3", 
"jconCls": "menu profile" 


"Parent_ 1id": "1", 
"className": "panel", 
"leaf": true 


}] 
让 


4.1.3 创建 数据 存储 器 : 通过 服务 器 端 加 载 菜单 


现在 已 经 创建 了 模型 ， 接 下 来 创建 数据 存储 需 。 创建 一 个 名 为 Packt .Store. Menu 的 新 类 5 
相应 的 ， 在 app/store 目 录 下 创建 一 个 名 为 Menu.js 的 文件 : 


Ext .define('Packt.store.Menu', { 
extend: 'Ext.data.Store', 


requires: | 
'Packt .model .menu .Root' 


] 了 


model: ' Packt.modqel .memnu .Root ' ， 


proxy: 1 
type: 'ajax', 
url: 'php/menu.php’', 


reader: { 
type: 'jJson', 
root: 'items' 


} 
}); 


这 个 数据 存储 需 使 用 Packt .model .menu .Root 模 型 , 并 且 使 用 Ajax 代理 方式 , 这 意味 着 可 
以 通过 提供 的 url 发 送 Aj ax 请 求 到 服务 硕 端 ， 通过 名 为 litems 的 Root 类 获取 如 我 们 前 面 讨论 模型 
时 列 出 的 JSON 格 式 数据 。 现 在 已 经 知道 了 需 从 服务 器 端 获 取 数 据 的 格式 ， 接 下 来 ， 就 要 实现 数 
据 获 取 功 能 。 


4.1.4 ”在 服务 器 端 处 理 动态 菜单 


参考 我 们 在 Packt .store.Menu 数 据 存储 需 代 码 里 的 描述 ， 在 php 目 录 下 创建 一 个 新 文件 
menu.php。 并 按 以 下 程序 逻辑 处 理 : 


(1) 打开 数据 库 连 接 ; 

(2) 通过 会 话 获取 登录 用 户 信息 ; 

(3) 从 Permission 表 获取 菜单 的 DD， 这 样 才 知道 用 户 对 应 的 权限 ; 
(4) 获取 用 户 具 备 权 限 的 模块 ，parent_id 为 Nul1l; 

(5) 对 每 个 模块 ， 获 取 用 户 可 访问 的 和 点 〈 沫 单项 ); 

(6) 编码 从 服务 右 端 返回 的 JSON 格 式 数据 ; 


(7) 关闭 数据 库 连 接 。 


人 Pre ~ 
开始 编写 代码 : 
require("db/db.php"); // #1 
session start(); // #2 
Susername = $ SESSION[username]; // #3 
SqueryString = "SELECT p.menu_ id menuIQd FROM User u "; // #4 
SqueryString .= "INNER JOIN permissions p ON u.group_ id= p.group_ id "; 
SqueryString .= "INNER JOIN menu m ON p.menu id= m.1id "; 
SqueryString .= "WHERE u.usSername = 'S$Susername' "; 
Sfolder = array(); // #5 


首先 ， 打 开 数 据 库 连 接 ( # )。 然 后 开局 会 话 ( 埠 )， 通 过 会 话 获 取 认 证 用 户 的 username 信 
息 (#3 )。 准 备 SQL 查 询 语句 ， 获 取 用 户 有 相应 访问 权限 的 Menu 表 的 ID 字段 ( 夫 )。 最 后 ， 声 明 
并 初始 化 返回 给 Ext JS 的 变量 (#5 )。 


继续 编写 代码 
if ($resultdb = Smysdq11->dquery(SdqueryString)) { // #6 

Sin = '(''; // #7 

while(Suser = Sresultdb->fetch assoc()) { 

Sin .= Suser['menuId'] . ","; // #8 

} 

Sin = substr($in, 0, -1) . ")"; // #9 

sresultdb->free(); // #10 

Ssql = "SELECT * FROM MENU WHERE parent id IS NULL "; 

Ssql .= "AND id in S$Sin"; // #11 


if (sresultdb = $mysqli->query($sql)) { // #12 


while(s$sr = $resultdb->fetch assoc()) { // #13 
Ssqlquery = "SELECT * FROM MENU WHERE parent id= '"; 
Ssqlquery .= Sr['id'] ."' AND id in $in"; // #14 


if (Snodes = $mysqli->query ($sqlquery)) { // #15 
Scount = Snodes->num rows; // #16 


if (Scount > 0){ // #17 


sr['leaf'] = false; // #18 
sr['items'] = array(); // #19 
while (Sitem = Snodes->fetch assoc()) { 


Ssitem['leaf'] = true; // #20 


sr['items'][] = $item; // #21 
} 
} 
Sfolder[] = SC; // #22 
} 
} 

} 
Ssresultdb->close(); // #23 


} 

在 这 部 分 的 代码 里 , 先 执 行 前 一 部 分 代码 中 准备 好 的 SQL 查询 语句 ,获取 用 户 有 相应 访问 权 
限 的 Menu 表 的 ID 字段 (#6 )。 然 后 ， 连接 所 有 的 ID 值 ， 并 放 在 括号 内 ， 作 为 后 面 in 运 算 符 的 操作 
列表 (#7、#8 和 #9 )。 因 为 要 重用 resultdp 变 量 ， 所 以 需要 及 时 释放 它 (#10 )。 


接 下 来 ， 要 获取 Menu 表 中 表示 一 个 模块 的 所 有 记录 ( 放 1 ); 本 例 中 ， 模 块 的 parent_id 岂 
为 nu11， 同 时 ，ia 必 须 存 在 于 in 变 量 表示 的 操作 列表 中 ， 也 就 是 说 ， 我 们 只 想 获 取 登 录用 户 有 
相应 权限 的 模块 。 然 后 执行 SQL 语句 (#12 )。 

对 每 一 个 模块 (#13 )， 选 择 Menu 表 中 表示 树 形 面 板 节 点 的 记录 (也 就 是 Packt .model. 
menu .Item 模 型 类 的 实例 )， 因 此 ， 需 要 执行 一 个 新 的 SQL 语 句 ( #15 )， 根 据 用 户 具 有 相应 访问 
权限 ( iq in $in ) 的 模块 (parent_id) 选择 属于 它 的 所 有 沫 单项 (#14 )。 

另外 , 还 需要 获取 结果 集 返 回 的 记录 数 (#16 )。 如 果 结 果 集 返回 的 记录 数 大 于 零 ( 意味 着 返 
回 了 记录 #17 )， 则 认为 这 个 模块 不 是 一 个 叶子 (ExtJS 的 node interface 即 节点 接口 的 概念 ，#18 )， 
然后 初始 化 items 属 性 (#19 )。 每 个 节点 可 当成 一 个 时 子 ( 吉 0 ), 并 分 配 节 点 给 它 的 父 模 块 (加 1 )。 

最 后 ， 要 把 模块 加 到 返回 给 Ext JS 的 集合 中 (#2 )， 然 后 关闭 结果 集 (#3 )。 

现在 ， 我 们 来 实现 服务 需 端 代码 的 最 后 部 分 : 


Smysqli->close(); // #24 


echo json encode(array( // #25 
"ijtems" => Sfolder 


) ); 

关闭 MySQL 连 接 ( #4 )， 把 信息 编码 成 JSON 格 式 ， 并 按 前 面 Packt .store .Menu 代 人 码 中 
proxy reader 指 定 的 ， 包 装 给 items 属 性 (#25 )。 

如 果树 形 面 板 树 层 次 大 于 2， 我 们 的 服务 帮 端 代码 就 无 法 运行 了 。 在 本 例 ， 树 形 面 板 仪 有 2 
层 : 根 节点 以 及 一 级 子 方 点 。 寿 想 创建 多 级 亲 单 ， 那 就 要 用 递归 算法 从 数据 库 里 获取 数据 ， 实 现 
起 来 就 复 林 多 了 。 


运行 服务 需 端 代码 ， 将 正确 返回 如 4.1.2 节 列 出 的 JSON 对 和 象 。 


菜单 数据 库 表 完 美 适 配 Ext JS ，Menu 表 是 根据 Ext JS 所 需 设 计 ， 可 方便 获取 数据 。 前 面 的 服 
务 骨 站 代码 同样 适 配 Ext JS。 如 采 我 们 有 从 零 开 始 说 计数 据 库 的 机 会 ， 就 很 可 能 有 不 同 设计 ， 那 
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么 服务 带 病 代码 获取 信息 的 方式 也 会 不 同 ,数据 库 和 服务 带 病 代码 的 实现 并 非 问 题 所 在 ,很 不 淹 ， 
Ext JS 有 要求 信息 以 特定 格式 返回 给 前 天 代码 ， 那 么 我 们 就 必须 这 么 做 。 如 采 从 数据 库 获 取 的 信息 
不 符合 Ext JS 的 要 求 〈 如 前 述 格式 )， 那 就 只 好 去 解析 它 ， 那 么 在 把 信息 返回 给 Ext JS 之 前 ， 服 务 
价 病 台 多 了 一 个 处 理 环 丰 。 


4.1.5 ”用 折 又 面板 和 树 形 面板 创建 菜单 


回 到 Ext JS 代 码 ， 实 现 动 态 菜 单 组 件 。 首 先 ， 在 app/view 下 创建 一 个 新 目录 menu， 并 创建 新 
文件 Accordion.js: 


Ext .define('Packt.view.menu.Accordion', { 
extend: 'Ext.panel.Panel', 
alias: 'widget.mainmenu', 
width: 300, 
layout: { 
type: 'accordion,' 


}, 
collapsible: false, 
hideCollapseTool: false, 
iconCls: 'sitemap', 
title: 'Menu' 


ry 
这 个 类 是 一 个 面板 ， 放 置业 单项 并 使 用 折 著 布局。 这 样 用 户 就 可 以 展开 需要 的 模块 。 将 title 
设 为 Menu( 可 以 使 用 语言 转换 文件 , 在 en.js、es.js 和 pt BR.js 里 设置 相应 属性 ), 并 设置 iconcls 美 化 。 


下 一 步 ， 创 建 代表 每 个 模块 的 树 形 面板 。 创 建新 类 Packt .view.menu.Item 和 新 文件 
Item.js， 文 件 位 于 app/view/menu 目 录 下 : 


Ext.define('Packt.view.menu.Item', 1{ 
extend: 'Ext.tree.Panel', 
alias: 'widget.mainmenuitem’', 


border: 0, 
autoScroll: true, 
rootVisible: false 


}); 
Packt .view.menu.Item 类 是 树 形 面板 。 沫 单 不 需要 边框 ， 此 外 要 隐藏 根 节 上 点。 我 们 并 没 


有 在 此 设置 太 多 属性 ， 其 余 属 性 将 在 控制 器 里 动态 设置 。 
4.1.6 ”在 视 见 区 蔡 换 中 央 区 域 容器 


实现 控制 从 之 前 , 需要 再 创建 一 个 组 件 : 包含 了 通过 荣 单 打开 的 所 有 界面 的 标签 面板 。 创 建 
Packt .view.MainPanel 类 ， 相 应 文件 为 MainPanel.js， 位 在 app/view/ 上 日 录 下 : 


Ext .define('Packt.view.Mainpanel', { 
extend: 'Ext.tab.Panel', 
alias: 'widget.mainpanel', 


activeTab: 0, 


items: | 
{ 
xtype: 'panel', 
closable: false, 
iconCls: 'home', 
title: 'Home' 


}); 


这 个 类 有 一 个 默认 的 activeTab 为 0， 是 items 属 性 配置 里 的 唯一 项 。 活 动 标 签 面 板 默 认为 
空 面 板 ， 不 允许 关闭 ， 有 一 个 主页 图 标 ， 标 题 为 Home ( 重申 一 次 ， 只 要 你 愿意 ， 可 以 在 语言 转 
换文 件 里 创建 一 个 新 属性 ， 并 使 用 它 )。 

接 下 来 ， 在 app/view/MyViewport.js 文 件 里 用 这 个 标签 面板 和 蔡 换 中 央 区 域 容 融 。 

{ 


xtype: 'mainpanel', 
region: 'center' 


} 

现在 ， 标 签 面板 可 以 “收纳 ” 荣 单打 开 的 组 件 了 。 
我 们 还 要 用 动态 菜单 蔡 换 左 侧 容 从 : 
{ 


xtype: 'mainmenu', 

width: 185, 

collapsible: true, 

region: 'west'//, 

//style: 'background-color: #8FB488;' 
} 


我 们 注释 或 者 移 除 style 行 。 用 折 著 面板 的 xtype 蔡 代 xtype 属 性 项 设置 。 接 下 来 让 我 们 回 
到 控制 顶 。 


4.1.7 创建 菜单 控制 器 


我 们 实现 了 所 有 的 视图 、 模 型 、 存 储 右 以 及 服务 器 端 代码 ， 只 剩 下 控制 带 还 没 实现 ， 所 有 的 
逻辑 都 在 其 中 处 理 。 让 我 们 继续 ， 在 app/controller 目 录 下 创建 Menu.js 文 件 。 


Ext .define('Packt.controller.Menu', { 
extend: 'Ext.app.Controller', 


models: | 
'menu.Root', 
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'menu .Ttem' 
I 
stores: |[ 

' Menu' 
| 


views: [ 


'menu.Accordion', 


'menu.1item’' 


refs: [| 
{ 
ref: 'mainpanel', 
selector: 'mainpanel' 
} 
I 
init: function(application) { 


this.controll(t 
"mainmenu" 


. 
. 


render: 


} 了 


this.onpPpanelRender 


"mainmenuitem": ({ 
select: 


itemclick: 


9 过 


我 们 添加 了 与 Menu 相 关 的 models、stores 和 views。 同 时, 添加 了 mainpanel 的 引用 一 一 


中 央 区 域 的 标签 面板 。 


我 们 将 监听 3 个 事件 。 第 一 个 是 泻 染 动态 瑟 单 。 用 户 一 旦 通过 认证 ， 视 见 区 界面 就 会 呈现 出 
来 。 包容 了 动态 采 单 的 折 车 面板 (xtype: mainmenu,， MyViewport 类 的 一 个 子 项 ) 也 将 被 
此 外 要 监听 树 形 面 板 太 点 (有 亲 单 选项 ) 相关 的 事件 : select 和 itemclick 事 件 。 用 户 选 择 了 某 
订单 项 , 我 们 将 在 标签 面板 以 一 个 新 标签 页 打开 相应 界面 。 监听 itemc1lick 是 因为 用 户 可 能 
意 间 关闭 了 相应 界面 并 希望 再 次 打开 。 如 果菜 单项 已 选择 过 ， 界 面 就 不 会 再 次 打开 ”， 所 以 需 


监听 select 事 件 。 


this.onTreepanelSelect, 


1. 泻 染 诅 套 JSON 为 数据 源 的 菜单 〈hasMany 绑 定 ) 


创建 一 个 方法 ， 用 服务 融 端 返回 信息 创建 动态 沫 单 : 


this.onTreepanelItemClick 


onPpanelRender: function(abstractcomponent, options) { 
this.getMenuStore() .load(function(records, op, success){ // #1 
// #2 
Var menuPanel = Ext.ComponentQuery.query ('mainmenu'){[0]; 


J 如 果 关 闭 了 相应 界面 且 无 法 再 次 打开 ， 就 出 问题 了 。 一 一 译 者 注 


Ext .eacnh (records, function(root){ // #3 


Var menu = Ext.create('Packt.view.menu.Item',{ // #4 
title: translations[root.get('text')], // #5 
iconCls: root.get('iconCls') // #6 

}); 

Ext .each (root.items(), function(itens){ // #7 


Ext .each (itens.data.items, function(item)t 


menu.getRootNode() .appendChild({ // #8 
text: translations[item.get('text')], 
leaf: true, 
iconCls: item.get('iconCls'), 

id: item.get('id'), 
className: item.get('className') 


过 
地 


menuPanel.add (menu); // #9 
}); 
}); 
} 


第 一 件 事 束 是 加 载 Menustore, 它 负 责 加 载 服 务 希 端 返回 的 般 套 JSON 数 据 ( 查 )。 存 储 需 加 
载 完 成 这 也 是 在 加 载 回调 国 数 里 创建 动态 菜单 的 原因 ) ， 需要 获取 Packt .view.menu. 
Accordion 类 的 引用 。 我 们 尚未 获取 控制 各 的 引用 (在 load 回 调 消 数 里 )， 通 过 
Ext .componentOuery .query ( #2 ) 获取 该 引用 ( xtype: mainmenu )。 这 个 查询 方法 返 加 一 
个 引用 数组 ,我 们 只 需要 第 一 个 ( 也 仪 有 一 个 满足 条 件 的 组 件 引 用 )。 另 外 ,在 方法 开头 给 Ehis 
设置 一 个 引用 (var me = this; )， 然 后 在 回调 函数 里 ， 用 me 变量 引用 控制 右 。 


对 Store 返 回 的 每 条 记录 (#3 ), 创建 一 个 树 形 面板 ( Packt .view.menu.Item,，# ) 表示 
每 个 模块 ， 并 设置 title ( 从 语 首 转换 文件 中 获取 , #) 和 iconcls (#6 ) 属性 项 。 


Ext.create 和 Ext.widget 


当 本 书 第 一 次 讨论 类 实例 化 的 几 种 方式 时 (第 2 章 )， 简 述 了 可 以 使 用 
> Ext .create 并 传 入 完整 类 名 作为 参数 ， 或 者 可 以 使 用 Ext .widget 并 传 入 类 别 
名 作为 参数 (还 有 其 他 方法 ， 但 这 两 种 是 最 常用 的 )。 这 只 是 个 人 偏好 而 已 ， 你 

可 以 使 用 我 们 在 第 2 草 里 提 到 的 各 种 方法 。 


接 下 来 ， 对 每 个 Packt .model .menu. Item 模 型 实例 〈 翅 )， 获 取 树 形 面板 的 根 节 点 ， 然 后 
所 加 一 个 新 方 点 (#8 )， 同 时 设置 text、leaf 和 iconCls 等 NodeInterface 类 的 配置 项 。igd 和 和 
className 是 我 们 添加 的 配置 项 。 以 后 访问 这 些 配 置 项 时 ， 需 要 从 raw 属 性 项 中 获取 。 


最 后 ， 添 加 树 形 面板 至 折 车 末 蛙 。 这 个 方法 运行 之 后 ， 动 态 末 单 就 完成 了 演 染 。 
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2. 动态 打开 菜单 项 

菜单 演 染 之 后 ， 用 户 可 以 选择 一 个 菜单 项 。 这 个 方法 的 处 理 逻 辑 是 : 当 用 户 选 择 了 菜单 项 ， 
我 们 需要 判定 屏幕 上 是 否 创建 了 相应 的 标签 面板 。 如 果 是 , 则 不 再 创建 ,只 须 选 择 并 激活 该 面板 ; 
如 果 否 ， 就 需要 创建 它 。 控 制 需 相 应 代码 如 下 : 


onTreepanelSelect: function(selModel, record, index, options) { 
var mainpanel = this.getMainpanel(); // #1 


Var newTab = mainpanel.items.findBy( // #2 
function (tab)t 

return tab.titile === record.get('text'); // #3 
}); 


If (I!InewTab){ // #4 


newTab = mainpanel.addl(t // #5 
xtype: record.raw.className., // #6 
closable: true, // #7 
iconCls: record.get('iconCls'), // #8 
title: record.get('text') // #9 

}); 

} 
mainPpanel.setActiveTab (newTab); // #10 


} 


首先 ， 获 取 标 签 面板 引用 (#1 )。 然 后， 比较 标签 title 跟 选择 市 点 的 text 是 否 相 同 (# )， 
从 而 验证 选择 菜单 项 对 应 的 标签 界面 是 否 已 创建 (#2 )。 

如 果 不 存在 新 标签 (# )， 则 添加 到 标签 面板 ， 作 为 实例 传 给 add 方 法 (#5 )。 通 过 节点 
className 获 取 添 加 组 件 的 xtype (#6 ), 标签 可 关闭 (#7 ), 跟 对 应 方 点 有 相同 的 ijconcls (#8) 
和 title (#9， 菜 单项 )。 

之 后 , 设置 对 应 标签 为 活动 标签 。 这 里 ,界面 已 渲染 ， 只 需 设 置 用户 所 选 界 面 为 活动 标签 即 
可 (#10 )。 

此 时 如 果 用 户 关 闭 当 前 所 选 菜 单项 ( 对 应 标签 )， 然 后 再 次 点 击 该 菜单 项 ， 将 不 会 有 任何 反 
应 。 用 户 得 选择 另 一 个 集 单 项 ， 再 回头 选择 该 祭 单 项 ， 这 才 有 将 。 为 避免 这 种 情况 ， 我 们 需要 监 
听 itemclick 事 件 : 


onTreepanelItemClick: function(view, record, item, index, event, options)t 


this.onTreepanelSelect (view, record, index, options).; 


}, 


这 个 方法 将 调用 onTreepanelSelect 方 法 ， 不 需 重 复 代 人 码 。 


4.1.8 ”改动 app.js 
最 后 的 一 步 是 在 app.js 中 添加 新 控制 器 : 
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controllers: | 
'Login', 
'TranslationManager', 
'Menu' 


] 

本 书 创建 的 每 个 控制 需 ， 都 需要 添加 到 app.js 中 的 controllers 配 置 项 ， 下 一 次 申明 新 控制 
天 时 别 筷 了 这 点 

执行 代码 并 打开 一 个 Menu ( 亲 单 ) 项 ， 系 统 会 打开 一 个 空 面板 ， 因 为 还 没有 实现 界面 (下 
一 章 内 容 )。 但 我 们 已 经 可 以 看 到 动态 菜单 如 下 图 所 示 : 


Mastering Ext | i 
Mastering Ext | 十 


localhost/masteringextls/ 7 | I | Ea 再 | 


Video Store Mana ger - Mastering ExtJs English > | 出 | Logout 


5 Menu | 全 Home 地 Users “ | 中 Groups and Permissions ™ 四 


蝇 security = 
| 号 ne a TE > ) 
有 Users 
2 Profile 


Mastering Extls book -= Loiane Gromer ~- http:/ /packtpub.cor 


4.2 ”小结 


本 章 我 们 学 习 了 通过 折 和 县 面板 和 树 形 面 板 为 每 个 模块 创建 动态 沫 单 的 方法 , 了 解 了 服务 融 站 
的 动态 逻辑 处 理 ， 以 及 如 何在 Ext JS 病 处 理 服务 剖 问 的 返回 信息 来 创建 动态 沫 单 。 最 后 ， 我 们 还 
学 习 了 如 何 通过 编程 打开 沫 单项 ， 并 在 中 央 区 域 标 签 面 板 里 显示 相应 界面 。 


下 一 章 我 们 将 实现 界面 列表 、 创 建 及 修改 用 户 ， 并 为 用 户 分 配 用 户 组 。 


用 尸 签 权 与 安全 


前 面 几 间 我们 完成 了 登录 和 注销 功能 、 


会 话 监 挖 ， 并 基于 用 户 权 限 实现 了 动态 末 单 。 然 而 ， 
日 前 所 有 的 用 户 、 用 户 组 以 及 权限 部 是 下 接 添加 到 数据 库 中 。 我 们 不 可 能 每 次 给 新 用 户 授 权 或 改 
变 用 户 权限 时 都 这 么 做 ， 因 此 需要 提供 一 个 界面 让 我 们 可 以 创建 新 用 户 ， 授 权 或 改变 权限 。 本 章 


内 容 如 下 : 


口 列 出 所 有 系统 用 户 ; 
D 创建 、 编 辑 和 删除 用 户 ; 
DO 文件 上 传 预先 ( 用 户 图 片 )。 


5.1 用 户 管 理 


用 户 管理 是 本 章 第 一 个 要 开发 的 模块 。 通 过 用 户 管 理 醒 块 , 我 们 可 以 查看 所 有 注册 用 户 、 添 
加 新 用 户 、 编 辑 以 及 删除 当前 用 户 。 


用 户 点 击 Users Menu ( 用 户 采 单 ) 项 ， 将 打开 一 个 用 户 列表 操 作 界 面 ， 如 下 图 所 示 


个 自身 Mastering Ext JS ww 
中 加 Mastering Ext JS [+ | 和 

人 下 localhost/ masteringextjs/ | [Gy | Ps 了 | 
Video Store Man ager -~ Mastering Ext JS 名 English ~ 日 Logout 
让 Menu 4 用 登 Home | 让 Users : 
入 security - 加 Add zip Edit © pelete E | 
由 Groups and Permissions Username Name Email oi 

起 Users | 


Loiane Groner me@loiane.com admin | 


Mastering ExtlS$ book - Loiane Groner - http:// packtpub,com 
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当 用 户 点 击 Add (添加 ) 或 Edit ( 编辑 ) 按钮 ， 系 统 会 提供 一 个 窗 体 给 用 户 用 以 创建 新 用 户 
或 编辑 当前 用 户 信息 〈 基 于 网 格 面板 上 所 选 记录 )。 编 辑 窗 体 如 下 图 所 示 : 


My Form 总 
User Information Picture 


Username:* |olane 


Name:+ Loiane Groner 


Email:* meBlolane.corm 
Group:* admin Ee 
picture: Browse,., 


(Cancal ”局 save 


创建 或 编辑 用 户 的 功能 包括 : 编辑 User Information ( 用 户 信息 )， 如 Name ( 姓名 )、Username 
( 用户 名 ) 等 。 我 们 还 可 以 上 传 用 户 图 片 。 还 有 一 个 额外 的 功能 : 利用 HTMLS API 新 特性 ， 我 们 
可 以 在 用 户 从 电脑 选择 岁 片 但 未 上 传 至 服务 天 之 前 预览 图 片 (Picture )。 


继续 前 进 ! 


5.2 列 出 所 有 用 忆 : 简单 的 网 格 面板 
我 们 需要 实现 如 本 章 第 一 张 图 所 示 那 样 的 界面 一 一 个 简单 的 网 格 面板 。 实 现 思路 如 下 。 
D 模型 一 一 表示 存储 在 用 户 表 里 的 信息 。 
D 存储 器 一 一 通过 代理 获取 服务 器 端 信息 。 
D 网 格 面板 一 一 表示 视图 。 
D 控制 器 一 一 监听 网 格 面板 盗 染 完成 与 否 ， 完 成 后 加 载 用户 信 息 。 


5.2.1 用 户 模 型 


首先 创建 一 个 模型 ,表示 User( 用 户 ) 表 ,在 app/model/security 目 录 下 创建 一 个 新 文件 User.js。 
这 个 模型 表示 User 表 里 password 字 上 段 之 外 的 所 有 字段 ,密码 是 非常 私密 的 信息 ,不 能 显示 给 其 
他 用 户 ， 包括 管 理 员 。 用 户 模 型 代码 如 下 所 示 : 


Ext .define('Packt.model.security.User', { 
extend: 'Ext.data.Model', 


lidProperty: 'id', 


fields: | 
{ name: 'id' }, 


{ name: 'name' }, 

{ name: 'userName' }, 
{ name: 'email' }, 

{ name: 'picture' }, 
{ name: 'Group id' } 


}); 
如 前 面 我 们 提 到 的 ， 除 了 passworq 字 段 ，User 表 的 其 他 字段 都 映射 到 这 个 模型 中 。 


5.2.2 用户 存 储 器 


现在 我 们 有 了 代表 User 表 记录 的 模型 ， 接 下 来 要 创建 存储 器 ， 并 设置 一 个 代理 加 载 数据 库 
用 户 信息 集合 。 在 app/store/security 目 录 下 创建 新 文件 Users.js (“Users” 为 复数 形式 ， 因 为 要 处 理 
用 户 信息 集合 )。 请 注意 ， 我 们 在 model 和 store 目 录 下 都 创建 了 一 个 security 新 目录 。 在 views 和 
controller 里 也 将 做 类 似 处 理 , 这 种 遵循 一 定 模式 ,在 每 个 包 里 都 创建 文件 的 方式 让 代码 维护 变 得 
很 容易 。 


用 户 存 储 带 代码 如 下 : 


Ext .define('Packt.store.security.Users', { 
extend: 'Ext.data.Store', 


requires: | 
'Packt .model .security.User' // #1 
| 3 


model: 'Packt.model.security.User', // #2 


proxy: { 
type: 'ajax', 
url: 'php/security/users.php', 


reader: { 
type: 'json', 
root: 'data' 


} 
了 


存储 天 表示 用 户 模 型 的 集合 ( #2 ) ， 时 于 明 很 重要 : the Packt.model. 
security.User 类 需 在 存储 需 加 载 前 就 完成 加 载 (#1 )。 使 用 Ajax 代理 从 服务 融 端 获取 JSON 格 
式 的 用 户 集合 数据 ， 用 户 集合 数据 包装 在 data 属 性 内 ， 如 以 下 格式 : 


{ 


"Success": true, 
"data": [{ 
ee 
"name": "Loiane Groner", 
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"userName": "loiane", 
"email": "me@loiane.com", 
"picture": "FE03.png", 
"Group_id": "1" 


上 
} 


Bs 


本 章 没 有 列 出 服务 器 端 代码 。 你 可 以 从 本 书 支持 网 站 获取 完整 代码 : 
https://github.com/loiane/masteringext]s。 


5.2.3 用户 网 格 面板 


接 下 来 创建 视图 , 管理 系统 用 户 。 编 码 之 前 需要 记 住 : 当 实现 编辑 用 户 组 界面 时 ， 需 要 显示 
隶属 于 用 户 组 的 所 有 用 户 。 这 时 候 需要 一 个 用 户 列表 , 也 就 是 说 , 需要 创建 一 个 组 件 列 出 用 户 ( 这 
里 指 所 有 系统 用 户 )， 后面 还 要 重用 它 。 因 此 , 我 们 创建 的 组 件 只 包含 用 户 列 表 , 不 包括 Add ( 添 
加 )、Edit (编辑 ) 或 Delete ( 删除 ) 按钮 。 我 们 将 添加 一 个 包含 这 些 按钮 的 工具 栏 以 及 用 户 网 格 
面板 到 为 一 组 件 中 。 


我 们 来 创建 网 格 面板 。 在 app/view/security 目 录 下 创建 UsersList.js 新 文件 ,在 文件 里 创建 新 类 


Packt .view.security.UsersList: 


Ext .define('Packt .view.security.UsersList', f{ 
extend: 'Ext.grid.Panel', 
alias: 'widget.userslist', 


frame: true, 


store: Ext.create('Packt.store.security.Users'), // #1 
columns: |[ 
{ 
width: 150, 
dataIndex: 'userName', 
text: ‘Username,'! 
}, 
{ 
width: 200, 
dataIndex: 'name', 
flex: 1, 
text: 'Name,' 
}, 
{ 
width: 250, 
dataIndex: 'email', 
text: 'Email' 


width: 150, 


dataIndex: 'Group_id', 
text: 'Group', 
renderer: function(value, metaData, record ){ // #2 


Var groupsStore = Ext.getStore('groups'),; 
Var group = groupsStore.findRecord('id', value); 
return group != null ? group.get('name') : value; 


} 
] 
}); 
上 面 的 代码 实现 了 一 个 简单 网 格 面 板 , 并 显示 从 服务 融 端 获取 的 信息 。 关 于 网 格 面板 ， 有 三 
个 重点 需要 进一步 讨论 。 第 -个 是 每 列 的 aataIindqex。 注 意 qataIndex 必 须 匹 配 模 型 里 的 字段 
名 。 另 外 , 我 们 要 特别 注意 Ext JS 是 大 小 写 敏感 的 ， 所 以 字段 名 group_iq 跟 Group_iq 是 两 公事 。 


第 二 个 重点 是 store 的 声明 (#l )。 请 注意 我 们 并 未 采用 Ext JS 模 型 -视图 -控制 器 (MVC ) 
应 用 开发 中 的 常用 做 法 ， 只 是 价 单 地 声明 store 为 security .Users。 我 们 显 式 实例 化 了 一 个 新 
的 store 实 例 。 为 什么 这 样 做 呢 ? 这 有 何不 同 吗 ? 是 有 很 大 不 同 ! MVC 架 构 通 过 存储 管理 右 获 取 
存储 带 实 例 的 引用 ， 而 存储 管理 需 决 定 了 只 有 一 个 引用 ， 因为 我 们 通过 存储 天 ID 获取 引用 。 只 
有 一 个 存储 融 引 用 贯穿 整个 应 用 (存储 需 在 不 同 的 组 件 和 界面 之 间 共 享 )， 这 意味 着 一 旦 改变 存 
储 般 ， 该 存储 融 的 其 他 所 有 实例 也 将 改变 ( 添加 新 记录 、 修 改 或 删除 等 )。、 有 了 时候 我 们 并 不 希望 
这 样 ， 而 是 希望 根据 不 同 目的 有 不 同 的 存储 天 实例 。 因 此 , 在 这 里 实现 了 一 个 独立 的 存储 天 引 用 
(在 实现 用 户 组 管理 模块 时 会 阐述 原因 , 届时 我 们 会 重用 用 户 列 表 加 载 指定 用 户 组 的 用 户 ) 我 们 
需 对 上 述 内 容 给 予 关 注 。 


第 三 个 重点 是 Group_id 列 的 renderer ( 滨 染 需 ) 图 数 ( 雪 )。 当 从 服务 天 端 加 载 存储 天 时 ， 
用 户 存 储 需 的 每 个 模型 实例 只 包含 Group_iq 列 名 而 没有 组 名 。 我 们 不 可 能 仅仅 显示 数字 给 用 户 ， 
因为 这 对 用 户 而 言 是 没有 意义 的 , 我 们 还 得 显示 组 名 。 但 我 们 现在 并 没有 组 名 信息 ， 需 要 考虑 从 
何 处 获得 它 。 事 实 上 ， 可 以 从 稍 后 要 创建 的 ， 包 含 了 所 有 用 户 组 信息 的 groups 存 储 器 里 获得 组 
名 。 此 ， 首先 传人 storeId 参 数 给 存储 管理 融 并 获取 存储 器 ; 然后 获取 Group_iaq 值 对 应 的 用 
户 组 模型 实例 ; 接 下 来 , 判断 存储 右 里 是 否 有 匹配 ig 的 用 户 模 型 实例 : 如 果 有 ， 就 显示 组 名 ， 否 
则 就 显示 Group_iaq。 我 们 可 在 一 对 一 、 一 对 多 或 多 对 多 等 数据 库 表 关联 关系 中 应 用 这 种 方法 。 


当 从 另 一 存储 器 里 获取 值 时 ,， 须 确保 值 存在 于 存储 器 中 。 这 意味 着 存储 器 必 
”人 须 包含 所 有 值 ， 并 且 不 能 对 其 进行 分 页 或 过 滤 。 需 找到 所 需 ID 之 后 才能 进行 数 
据 分 页 。 另 一 种 办 法 是 实现 一 个 具有 非 持久 化 字段 的 模型 ， 只 用 于 显示 ,这 种 广 
式 下 就 不 用 在 别 的 存储 器 中 搜寻 值 了 。 当然, 这 也 意味 着 需 从 服务 器 端 获取 更 多 
信息 。 我 们 得 评估 不 同情 形 从 而 的 确定 最 佳 方案 。 


现在 我 们 有 了 用 户 网 格 面板 ,还 需要 一 个 组 件 , 用 来 包含 用 户 网 格 面 板 以 及 市 有 六 加 、 编 辑 
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和 删除 按钮 的 工具 栏 。 面 板 是 提供 停 驻 项 的 最 简单 组 件 ， 因 此 ,创建 一 个 扩展 上 
Ext .panel .Panel 的 新 类 Packt .view.security.Users。 在 app/view/security 目 录 下 创建 一 个 
Users.js 新 文件 : 


ExXt .aqaeflne(' Packt.view.Security.USserSsS'，({ 
extend: 'Ext.panel.Panel', 
alias: 'widget.users', 
requires: | 


'Packt .view.security.UsersList' // #1 


] [A 


layout: { 
type: 'fit' // #2 


xtype: 'userslist' // #3 
} 
] 


}); 

面板 里 只 演 染 了 一 个 用 户 网 格 面板 组 件 (#2 )。 由 于 用 了 xtype 实 例 化 户 网 格 面板 ， 因 此 需 
要 在 reauires 声 明 里 添加 它 ( 析 )。 只 有 一 个 组 件 并 且 和 希望 它 能 占 满面 板 所 有 剩余 空间 时 ， 就 用 
fit 布 局 (#2 )。 


下 一 步 要 添加 保 驻 于 项 部 这 有 瓷 加、 编辑 和 删除 按钮 的 工具 栏 ， 在 Packt.view. 


security.Users 类 的 dockedItems 里 声明 它 : 


dockedItems: | 
{ 

xtype: 'toolbar', 

flex: 1, 

dock: 'top', 

items: | 

{ 

xtype: 'button', 
text: 'Add', 
itemId: 'add', 
liconCls: 'add' 


xtype: 'button', 
text: 'Edit', 
itemId: 'edit', 
liconCls: 'edit' 


xtype: 'button', 
text: 'Delete', 
ijtemId: 'delete', 


jconCls: 'delete' 


为 了 后 续 能 在 控制 带 里 识别 每 个 按钮 点 击 事件 ， 我 们 为 每 个 按钮 设置 了 itemId 项 。 现 在 我 
们 的 组 件 完 成 了 。 


5.2.4 ”用户 控 制 器 


到 最 后 一 步 了 ， 我 们 需要 一 个 界面 以 加 载 系统 的 所 有 用 户 ， 当 用 户 网 格 面板 准备 就 绪 并 演 染 
之 后 ， 这 个 界面 将 加 载 存 储 絮 。 这 部 分 我 们 需要 在 控制 带 里 实现 。 接 下 来 ,创建 控 制 磊 :在 
app/controller/security 目 录 下 创建 新 文件 Users.js， 创 建 Packt .controller.security.Users 类 . 


Ext .define('Packt.controller.security.Users', { 
extend: 'Ext.app.Controller', 


views: [| 
'security.Users' // #1 


] > 
init: function(application) { 


this.controll(t 
"userslist": { // #2 
render: this.onRender 
} 
}); 
}, 


onRender: function(component, options) { // #3 
component .getStore().1oad(); // #4 
} 


}); 


自 完 ， 在 views 属 性 里 声明 用 户 网 格 面 板 视 图 (#1 )。 然后， 开始 监听 用 户 网 格 面板 的 泻 染 
事件 〈( 埠 )。 当 render ( 演 染 ) 事件 触发 ， 执行 onRender 方 法 (#2), 在 其 中 实现 用 户 存 储 带 的 
加 载 。 再 次 强调 一 下 : 因为 用 户 网 格 面 板 视 图 负责 实例 化 存储 作 ， 所 以 我 们 不 能 在 stores 属 性 
里 声明 用 户 存储 甫 ,因此 控制 丛 不 存在 二 接 获 取 存 储 带 的 方法 。 我 们 通过 获取 用 户 网 格 面板 引用 ， 
进一步 获取 用 户 存 储 融 引用， 然后 加 载 用 户 存 储 表 ; 这 正 是 onRender 方 法 所 做 的 。 


接 下 来 ， 把 控制 融 添 加 到 app.js 文 件 中 ， 修 改 Menu 数 据 库 表 ( 修改 用 户 记 录 ) 的 className 
列 值 为 Users， 如 下 图 所 示 : 
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起 | Et 画 屋 本 | Export: 本 | 


iconcls 可 parent jd className 


menu admin 
menuyu_groups 1 panel 
menulz Menuy Users 1 Users 


运行 程序 ， 可 以 看 到 所 有 系统 用 户 的 列表 : 


本 局 筷 Mastering Ext js 到 
| 国 Mastering Ext J5 L+| | 
(4 a localhost/masteringextjs/ | 四 -| 
Video Store Manager - Mastering Ext ]5 E English ~ | 里 | Logout 
Tr Menu 3 || 全 Home I Users 
= 一 人 ee ET 一 
态 Security 2 Name Email Group | 
乙 Groups and Permissions Loiane Groner -meloiane.com admin 
: 
| 


Mastering Extls book — Loiane Gromer ~— http:/! /packtpub.com 


5.3 ”添加 和 编辑 用 户 

我 们 实现 了 列 出 所 有 系统 用 户 的 功能 , 接 下 来 要 实现 添加 和 编辑 功能 , 但 在 控制 器 中 添加 新 
的 事件 监听 器 之 前 ， 需 要 新 建 视 图 ， 作 为 编辑 或 添加 用 户 的 界面 。 
5.3.1 创建 编辑 视图 : 窗 体 里 的 表单 


新 视图 是 个 弹出 窗 体 , 包含 用 户 信息 表单 、 工 具 栏 , 以 及 底部 的 两 个 按钮 : Cancel 按 钮 及 Save 
按钮 。 窗 体 很 像 第 2 章 里 实现 的 登录 窗 体 ， 但 将 实现 新 的 功能 ， 如 表单 上 传 、 用 HTML5 新 特性 实 
现 文件 预览 等 。 


创建 扩展 自 window 类 的 新 类 Packt .view.security.Profile: 


Ext .define('Packt.view.security.Profile', { 
extend: 'Ext.window.Window', 
alias: 'widget.profile', 
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height: 260, 
width: 550, 


requires: ['Packt .util.Util'], 


layout: { 
type: 'fit' 
}, 


title: 'User', 


items: I[ 
{ 
xtype: 'form', 
bodyPadding: 5, 


layout: { 
type: 'hbox', // #1 
align: 'stretch' 

}, 

items: I[ 


] 


] 
站 


其 中 有 两 点 需要 说 明 ， 第 一 是 不 使 用 autoshow 属 性 。 这 样 我 们 就 可 以 在 创建 好 窗 体 并 设置 
一 些 属性 后 ， 通 过 show 方 法 调用 来 呈现 它 。 


第 二 点 是 表单 的 布局 ,我 们 没有 使 用 表单 默认 布局 ( anchor 布 局 ), 而 是 采用 hbox 布 局 (#1 )， 
这 样 就 可 以 水 平 组 织 表单 里 的 组 件 项 。 我 们 还 希望 组 件 占 满 垂 直 剩 余 空 间 ， 因 此 将 align 设 置 为 
streton:; 这 样 就 不 用 为 每 个 组 件 设置 高 度 。 


现在 来 给 表单 添加 第 一 个 组 件 , 回 头 看 看 本 革 开 头 的 图 示 , 可 发 现 我 们 打算 用 两 个 fieldset 
类 型 组 织 表 音 组件。 因此， 首先 实现 的 组 件 就 是 fieldqset， 用 以 组 织 用 户 信息 。 


{ 
xtype: 'fieldset', 
flex: 2， 
title: 'User Information', 
defaults: { 
afterLabelTextTpl: Packt.util.Util.required, // #1 
anchor: '100%', 
xtype: 'textfield', 
allowBlank: false, 
labelWidth: 60 
}, 
items: [ 
] 
} 3 


给 所 有 必 填 组 件 字 上 段 打 上 红星 标记 ( #1 )。 afterLabelTextTpl 属 性 是 个 字符 串 或 
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XTemplate 配 置 , 放 在 标签 文本 后 面 的 标记 位 上 。 像 大 多 数 必 填 字段 一 样 ,需要 声明 allowBlank 
属性 为 false; 同时 声明 xtype 属 性 默认 设置 为 textfield。 后 续 如 果 某 些 字 段 不 需要 默认 设置 ， 
我 们 再 取 其 他 值 代 替 。 接 下 来 ， 声明 fieldqset 中 items 属 性 设置 项 里 的 组 件 字 段 : 


| 


xtype: 'hiddenfield', 
fieldLabel: 'Label', 


name: '1id' 

}, 

{ 
fieldLabel: 'Username', 
name: 'uSerName,' 


fieldLabel: 'Name', 
maxLength: 100, 
name: ‘'name' 


fieldLabel: 'Email', 
maxLength: 100, 
name: 'email' 


xtype: 'combobox', 

fieldLabel: 'Group', 

name: 'Group_ id', // #1 
displayField: 'name', //#2 
valueField: 'id', // #3 
queryMode: 'local', // #4 
store: 'security.Groups' // #5 


xtype: 'filefield', 
fieldLabel: 'Picture', 


name: 'picture', 
allowBlank: true, // #6 
afterLabelTextTpl: '' // #7 


} 


隐藏 1d 字段 ， 因 为 我 们 仪 在 内 部 使 用 且 不 希望 将 其 呈现 给 用 户 , userName、name 和 email 
为 答 单 文本 字段 。 


接 独 实现 组 合 框 。 将 用 户 模型 Group_id 字 段 〈#l ) 映射 至 组 合 框 ; 当 已 有 的 用 户 加 载 进 表 
单 符 编辑 时 ， 获取 Group_ ia， 匹配 用 户 组 的 id ( 已 是 组 合 框 的 值 ， #3 )， 组 合 框 显示 用 户 组 名 
称 ( #2 )。 我 们 使 用 了 groups 存 储 右 (#5， 与 用 户 网 格 面 板 演 染 函数 里 使 用 的 存储 带 实 例 是 同一 
个 )， 组 合 框 只 加 载 一 次 grzoups 存 储 锅 〈 粳 )。 这 样 一 来 ， 打 开 组 合 框 时 ， 不 用 每 次 都 加 载 服务 
售 曾 数据 。 
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现在 实现 文件 上 传 了 字段 。 由 于 该 字段 非 必 填 项 ( #6 )， 就 不 需要 显示 红星 标记 (要 )， 这 里 ， 
我 们 履 写 了 默认 设置 。 


以 上 实现 了 第 一 个 fielqdset 组 件 ， 显示 在 表单 左边 。 下 一 步 ， 实 现 男 一 个 位 于 表单 右边 并 
包含 一 张 图 片 的 Eieldqset 组 件 。 


{ 
xtype: 'fieldset', 


title: 'Picture', 
width: 170, // #1 
ijtems: [ 


{ 
xtype: 'image', // #2 
height: 150, 
width: 150, 
Src: '! // #3 


} 


这 个 fieldqset 组 件 声 明了 固定 宽度 (#l )， 其 宽度 将 固定 。 表 单 使 用 hbox 布 局 ， 而 前 面 实 
现 的 fieldqset 组 件 设置 了 flex 必 性， 所 以 它 将 占 满 剩余 水 平 空 间 。 


在 Picture fieldset 组 件 里 我 们 使 用 了 一 个 Ext Image 组 件 。 Ext .Image ( #2 ) 类 用 来 
创建 并 演 染 图 片 。 它 会 用 特定 的 src( 里 面 是 代码 片段 ) 在 文档 对 象 模 型 ( Document Object Model， 
DOM ) 中 创建 一 个 <image> 标 签 (#2 )。src 属 性 目前 为 空 。 当 加 载 已 有 的 用 户 并 编辑 时 ， 将 在 
Image 组 件 中 显示 用 户 图 片 ( 如果 有 的 话 ) 同样 ， 如 打 用 户 上 传 新 图 片 ， 也 将 在 其 中 预览 。 


最 后 一 步 是 声明 一 个 带 有 保存 和 取消 按钮 的 左 部 工具 栏 。 


dockedItems: [ 
{ 


xtype: 'toolbar', 
flex: 1, 
dock: 'bottom', 
ui: 'footer', 
layout: { 
pack: 'end', // #1 
type: 'hbox' 
}, 
items: I[ 
{ 
xtype: 'button', 


text: 'Cancel', 
itemId: 'cancel', 
ijconCls: 'cancel' 


xtype: 'lbutton', 
text: 'Save', 
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itemId: 'save', 
ijconCls: 'save'! 


] 


我 们 希望 按钮 排列 在 工具 栏 右 侧 ， 因 此 使 用 了 hbox 布 局 并 通过 pack 属 性 配置 项 把 按钮 放 至 
工具 栏 示 端 (#1 ) 现在 ， 编 辑 / 话 加 窗 体 已 准备 就 绪 ， 但 在 实现 添加 和 编辑 监听 天 之 前 ， 仍 有 一 
些 细 克 需要 考 感 。 


5.3.2 ”用户 组 模型 


在 用 户 网 格 面板 和 用 户 组 组 合 框 的 实现 里 ， 我 们 声明 了 groups 存 储 锅 ， 用 来 从 数据 库 加 载 
所 有 的 用 户 组 。 现 在 我 们 就 来 实现 它 ， 第 一 步 要 创建 表示 Groups 数 据 库 表单 条 记录 的 模型 ， 
Packt.model .security. Group 模 型 代码 如 下 : 


Ext .define('Packt.model.security.Group', { 
extend: 'Ext.data.Model', 


idProperty: 'id', 


fields: | 
{ name: 'id' }, 
{ name: 'name' } 


}); 


Groups 表 很 向 单 ， 只 包含 了 两 列 〈id 和 name )， 因 此 group 模 型 也 就 向 单 地 包含 这 两 个 相 
应 字段 。 


5.3.3 ”用户 组 集 模 型 
创建 完 group( 用 户 组 ) 模型 后 ， 接 下 来 创建 groups (用户 组 集 ) 模型 。 


~ 要 始终 养 成 这 种 命名 习惯 : 模型 ( model ) 名 称 用 实体 名 称 的 单数 形式 ， 存 
储 器 ( store ) 名 称 用 模型 /实体 名 称 的 复数 形式 。 


创建 新 的 存储 龙 Packt .Store.security .Groups: 


Ext .define('Packt.store.security.Groups', { 
extend: 'Ext.data.Store', 


requires: | 
'Packt .model .security .Group' 
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model: 'Packt.model.security.Group', 
storeId: 'groups', //#1 


Proxy: { 
type: 'ajax', 
url: 'php/security/group.php', 


reader: { 
type: 'json', 
root: 'data' 
} 
} 
}); 


这 个 存储 髓 跟 我 们 已 创建 的 存储 髓 很 相似 。 唯 一 要 注意 的 是 , 这 里 我 们 声明 了 一 个 storeId 
属性 。 当 我 们 执行 用 户 网 格 面板 szoup_iq 列 的 尝 染 国 数 代码 (Ext.getSstore('groups') ) 时 ， 
声明 storeIdq 属 性 对 于 通过 存储 管理 融 获 取 存 储 需 是 个 好 方式 。storeId 有 属性 在 应 用 程序 范围 内 
给 存储 需 分 配 唯一 的 ID 值 。 

同样 ，Gcroups 存 储 器 跟 其 他 存储 器 差不多 ， 通 过 JSON 格 式 数 据 的 aata 属 性 取 回 服务 器 端 
用 户 组 集 信 息 : 


{ 


"Success": true, 
"data": [{ 
a 
"name": "admin" 


}] 
由 


现在 ， 相 关 视 图 、 模 型 和 存储 融 都 已 创建 。 接 下 来 我 们 实现 控制 融 中 所 需 的 监听 事件 。 


5.3.4 控制 器 : 监听 Add 按 钮 事件 


当 用 户 点 击 (Add ) 按钮 时 , 将 呈现 编辑 用 户 窗 体 ( Packt .view.securitv.Profile 类 )。 


第 一 步 ， 在 用 户 控 制 兹 this .control 声 明 中 添加 事件 监听 人 融 : 


"users button#add": { 
click: this.onButtonClickAdd 


} 
我 们 要 找 的 添加 按钮 在 users 组 件 (Packt.view.security.Users 类 ) 里 ， 并 日 将 按钮 
的 itemId 设 置 为 adqd， 所 以 选择 问 为 users button#add。 编 辑 和 删除 按钮 的 选择 需 也 类 似 ， 


只 需 更 改 相应 的 itemId 即 可 。 
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当 用 户 点 击 Add 按 钮 时 ， 控 制 磊 执行 onButtonclickAdgd 方 法 : 


onButtonClickAdd: function (button, e, options) { 
Var win = Ext.create('Packt.view.security.Profile'); 
win.setTitle('Add new User'); 
win.show(); 


} 

在 这 个 方法 中 ， 我 们 创建 了 一 个 编辑 窗 体 的 实例 ， 并 将 标题 设置 为 aad new User (这 里 可 
以 使 用 前 面 实现 的 多 语言 文 持 功能 )， 最 后 将 这 个 可 以 把 新 的 用 户 信 息 发 送 给 系统 用 户 的 窗 体 呈 
现 出 来 。 


5.3.5 ”控制 器 : 监听 Edit 按 钮 事件 
我 们 也 可 以 编辑 现 有 用 户 ， 所 以 需要 监听 编辑 按钮 点 击 事件 : 


"users button#edit": { 
click: this.onButtonClickEdit 


} 


可 以 看 到 ， 编 辑 按钮 选择 各 与 洪 加 按钮 非常 类 似 ， 差 异 之 处 只 在 于 itemIgd 不 同 。 
当 用 户 点 击 Edit 按 钮 时 ， 控 制 闫 执行 onButtonCclickEdit 方 法 : 
onButtonClickEdit: function (button, e, options) { 

var grid= this.getUsersList(), // #1 


record = grid.getSelectionModel() .getSelection(); 


if(record[0]){ // #2 
Var editWindow = Ext.create('Packt.view.security.Profile'); 


editWindow.down('form') .loadRecord(record[0]); // #3 
if (record[0] .get('picture')) { //#4 
Var img = editWindow.down('image'); 


img.setSrc('resources/profilelImages/' + record[0] .get('picture')); 


} 
editWindow.setTitle(record[0] .get('name')); // #5 


editWindow.show().; 


J 


至 此 , 我 们 的 代码 还 没有 完成 。 想 要 编辑 一 个 现 有 用 户 , 还 需要 将 所 选用 户 的 信息 填 入 表单 。 
首先 ， 获 取 用 户 网 格 面板 的 引用 ， 并 获取 所 选用 户 记 录 ( #1 )。 如 果 获 取 到 所 选用 户 记 录 (机)， 
就 创建 一 个 窗 体 实例 ; 用 所 选用 户 记 录 信 息 加 载 表 单 (#2 )， 设置 窗 体 title 属 性 为 所 选用 户 记 
录 的 name 属 性 值 (#5 )， 之 后 显示 该 窗 体 。 


还 有 一 个 细 市 :我 们 还 打算 显示 用 户 图 片 ,因此 还 要 检查 所 选用 户 信 息 里 是 否 包 含 图 片 ( 殖 )， 
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如 果 有 图 片 ， 束 获 取 Image 组 件 的 引用 并 设置 source 为 用 户 图 片 。 这 样 当 上 传 一 张 新 的 用 户 图 
片 时 就 会 看 到 它 ， 我 们 把 网 片 保存 在 resources/profileImages 目 录 中 。 也 可 以 把 图 片 直接 保存 在 数 
据 库 里 ,但 这 会 引起 性 能 问题 ， 因 此 还 是 保存 在 目录 里 。 我 们 会 在 另 一 章 学 习 怎 样 把 文件 保存 到 
数据 库 。 


5.3.6 ”控制 器 : 保存 用 户 信 息 


现在 , 用 户 可 以 打开 编辑 窗 体 添加 或 编辑 用 户 信息 了 , 接 下 来 我 们 实现 保存 按钮 。 不管 是 添 
加 新 用 户 还 是 编辑 已 有 的 用 户 信息 ,我们 都 采用 同样 的 保存 方法 。 如 果 要 用 UPDATE 或 INSERT 操 
作 ， 可 交 给 服务 器 端 处 理 。 


首先 ， 为 保存 按钮 应 加 监听 从 : 


"profile button#save": { 
click: this.onButtonClickSave 


} 


记 住 ， 我 们 在 Packt .view.security .Profile 类 里 实现 保存 按钮 的 功能 ， 因 此 选择 带 限 
定 成 profile (xtype 属 性 ) 里 itemIdq 为 save 的 按钮 。 


当 用 户 点 击 Save 按 钮 时 ， 控 制 关 执行 onButtonClickSave 方 法 。 因 为 这 个 方法 的 代码 比 较 
长 〈 指 源 代码 行 数 )， 我 们 一 步 一 步 地 实现 它 : 
onButtonClickSave: function(button, e, options) { 
Var win = button.up('window'), // #1 


formPanel = win.down('form'), // #2 
store = this.getUsersList() .getStore();// #3 


if (formPpanel.getForm() .isValid()) { // #4 
formPpanel .getForm() .submit({// #5 
clientValidation: true, 
url: 'php/security/saveUser.php', // #6 
// 成 功 和 失败 
}); 
} 


首先， 获取 窗 体 引用 (#1 )， 然 后 依次 获取 表单 引用 〈 雪 入 用 户 网 格 面板 存储 带 引 用 (〈 雹 )。 
我 们 打算 在 用 户 信 息 保 存 之 后 ， 关 闭 窗 体 ， 并 重新 加 载 用户 网 格 面板 存储 带 。 


接 下 来 验证 表单 是 否 合法 (大 ， 用 户 根 据 客户 问 验 证 规则 填充 合法 值 )， 验 证 通过 后 提交 表 
单 ( 痊 ) 至 url (#6) 对 应 页 面 。 


可 以 通过 存储 带 功 能 加 载 、 创 建 、 编 辑 和 删除 用 户 〈 如 同 后 续 阐 述 )。 然 而 ,我们 现在 采用 
为 一 种 方式 : 直接 通过 提交 方法 发 送 数 据 给 服务 天 六 ， 因 为 还 要 上 传 一 个 文件 给 服务 从 闪 。 


下 一 步 要 实现 success 和 failure 图 数 。 我 们 先 来 实现 success 国 数 : 
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success: function(form, action) ({ 


var result = action.result; // #7 
if (result.success) { 
Packt .util.Alert.msg('Success!', 'User saved.'); // #8 


store.1oad(); 
win.close(); 
} else { 
Packt .util.Util.showErrorMsg (result.msg); // #9 
} 
} 
通常 ， 我们 先 获 取 服 务 冀 问 啊 应 (#7 )。 如 采 成 功 ， 则 显示 给 用 户 一 个 摘要 通知 (#8 )， 然 后 
关闭 窗 体 并 重新 加 载 用 户 存 储 句 , 从 服务 需 获 取 最 新 数据 ( 请 注意 , 如 果 我 们 使 用 存储 锅 的 sync 
方法 从 服务 顶端 同 步 添加 、 编 辑 及 删除 的 数据 ， 就 不 需要 重新 加 载 用 户 存 储 末 了 )。 如 有 末 服 务 需 


端 出 错 ( result. success 为 false )， 则 显示 服务 上 六 错误 信息 ( #9 )。 


下 一 步 实现 failure 男 数 。 因 为 我 们 实现 了 所 有 Ajax 调用 的 默认 failure 国 数 处理 代 码 ,， 因 
此 也 对 所 有 的 表单 提交 failure 图 数 实现 默认 处 理 : 


failure: function(form, action) { 
switch (action.failureType) { 
Case Ext.form.action.Action.CLIENT INVALID: 


Ext .Msg.alert('Failure', 'Form fields may not be submitted with invalid 
values'); 
break; 
case Ext.form.action.Action.CONNECT FAILURE: 
Ext .Msg.alert('Failure', 'Ajax communication failed'); 
break; 
Case Ext.form.action.Action.SERVER INVALID: 
Ext .Msg.alert('Failure', action.result.msg);} 


} 


大 体 上 ， 我 们 检查 字段 是 否 提交 了 合法 值 、 是 否 有 通信 错误 或 者 其 他 状况 。 
现在 ,我 们 的 用 户 信 息 保存 功能 就 完成 了 。 


5.3.7 ”控制 器 : 监听 Cancel 按 钮 
还 剩 一 个 取消 按钮 需要 我 们 实现 。 在 this.conttrol 设 置 里 添加 监 


"profile button#cancel": { 
click: this.onButtonClickCancel 
} 


当 用 户 点 击 Cancel 按 钮 时 ， 控 制 器 将 执行 onButtonClickCancel 方 法 : 


onButtonClickCancel: function(button, e, options) { 
button.up('window') .close(); 


} 


98 第 5 章 用户 鉴 权 与 安全 


我 们 希望 的 实现 很 简单 : 如 果 用 户 和 希望 取消 对 已 有 用 户 信息 的 修改 或 者 新 用 户 的 添加 , 系统 
就 关闭 编辑 窗 体 。 由 于 取消 按钮 在 编辑 窗 体 里 ， 因 此 先 找 到 它 然 后 调用 close 方 法 销毁 窗 体 。 


5.3.8 在 上 传 之 前 预览 文件 
最 后 , 为 编辑 窗 体 添加 文件 上 传 预 览 功能 。 这 实现 起 来 并 不 困难 , 却 能 让 应 用 程序 增色 不 少 。 


我 们 要 做 的 是 : 当 用 户 通过 文件 上 传 组 件 选择 一 个 新 文件 时 ， 使 用 HTMLS 的 文件 读 取 API 
读 取 文 件 。 遗 憾 的 是 ， 并 非 所 有 的 浏览 器 都 支持 这 个 API 特 性 ， 只 有 以 下 版 本 的 浏览 器 才 支持 : 
Chrome 6+、 Firefox 4+、 Safari6+、Opera 12+、 Explorer 10+、10OS Safari16+、Android 3+、Opera 
Mobile 12+。 不 过 不 用 担心 ， 我 们 可 以 首先 判断 浏览 絮 是 否 支 持 API 特 性 ， 如 果 不 支 持 就 不 用 这 
个 特性 ， 也 就 是 说 文件 预 哆 功能 不 会 起 作用 。 


若 希 望 了 解 更 多 关于 文件 读 取 API 的 信息 ,请 访问 官方 规范 ( http://www.w3. 
org/TR/file-upload/ ); 若 布 望 了 解 更 多 HTMLS 的 新 特性 ， 请 访问 http:/www.html5 
rocks.com/。 


a 先 择 了 一 个 新 文件 时 ,change 事 件 将 被 触发 , 因此 要 在 控制 


"profile filefield": { 
change: this.onFilefieldChange 
} 


接 下 来 ， 我 们 需要 实现 onFilefieldchange 方 法 : 


onFilefieldChange: function(filefield, value, options) { 
var file = filefield.fileInputEl.dom.files[0]; // #1 


Var picture = this.getUserPicture(); // #2 

if (typeof FileReader !== "undefined" && (/image/i) .test (file.type)) { // #3 
Var reader = new FileReader (); // #4 
reader.onload = function(e)t // #5 

picture.setSrc(e.target.result); // #6 

}; 
reader.readAsDataURL (file); // #7 

} else if (!(/image/i) .test (file.type)){ // #8 
Ext .Msg.alert('Warning', 'You can only upload image files!'); 
filefield.reset(); // #9 


} 


首先 ， 获取 上 传 组 件 文件 输入 元 对 中 的 文件 对 象 ( 坦 ， 上 传 组 件 作 为 参数 传 入 
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onFilefieldchange 方 法 )。 之 后 ， 获 取 表 单 中 Ext .Image 组 件 的 引用 (机 )， 这 样 ， 我 们 就 能 
够 修改 其 source 属 性 为 预 完 文 件 。 


我 们 还 测试 了 浏览 姻 是 否 支持 文件 读 取 API 特 性 ， 以 及 用 户 所 选 文 件 是 否 为 图 片 类 型 ( #3 )。 
如 果 两 者 都 为 true， 则 实例 化 FileReader【(〈 驳 )， 并 给 它 添 加 一 个 监听 需 〈 拇 )， 这 样 ， 当 
FileReader 实 例 完 成 谈 取 文件 ， 束 可 以 将 其 内 容 设置 给 Ext. Image 组 件 的 source 属 性 〈#6 )。 
当然 ， 要 触发 onload 事 件 ， 得 徘 FileReader 实 例 读 取 文件 内 容 (要 )。 有 一 点 至 关 重 要 : 在 上 
传 服 务 融 之 前 显示 文件 内 容 。 如 果 用 户 保存 了 表单 的 变更 ,新 的 用 户 信息 就 会 发 送 至 服务 需 端 ( 包 
括 上 传 的 文件 )， 下 一 次 打开 编辑 窗 体 时 ， 就 会 显示 图 片 了 。 


我 们 如 何 获取 上 传 文件 的 完整 路 径 呢 ? 例如 ，Ext JS 文件 上 传 组 件 显示 
C:fakepathmameOfTheFile.jpg (但 这 并 非 真 实 路 径 )， 我 们 想 获得 其 真实 路 径 ， 
、 ”如 C:\Program FileswnameOfTheFile.jpg。 答 生 是 : 利用 JavaScript 无 法 实现 〈 而 Ext 
、 JS 是 一 个 JavaScript 框 架 )! 
这 种 限制 并 非 来 自 ExtJS; 试 试 其 他 JavaScript 框 架 / 库 ， 如 jQuery， 你 会 发 现 
同样 不 可 能 实现 ,因为 这 是 浏览 器 的 安全 约束 。 想 像 一 下 如 果 没 有 这 种 约束 ， 可 
能 就 会 有 人 开发 出 恶意 JavaScript 程 序 并 在 你 浏览 网 页 时 获取 你 电脑 上 的 信息 。 


有 一 个 好 消息 : 如 果 用 户 选 择 的 文件 不 是 图 片 文 件 (#8 )， 我 们 将 显示 一 条 信息 提示 只 有 图 
片 可 以 上 传 , 并 重 置 文件 上 传 组 件 。 但 不 池 的 是 , 我 们 无 法 在 浏览 窗口 过 渡 文 件 类 型 (打开 窗口， 
你 可 以 选择 一 个 文件 )， 这 是 一 个 让 我 们 在 Ext JS 客户 端 而 非 服务 器 端 进行 验证 的 折 囊 方案 。 


如 果 FileReader 实 例 不 可 用 ， 束 什么 也 不 会 发 生 。 用 户 只 能 选择 文件 而 无 法 了 预览。 


可 上 传 文件 的 大 小 取决 于 于 Ext JS 应 用 程序 所 部 署 的 Web 服 务 器 软件 对 其 的 
yy 限制 设 定 。 例如，Apache 限 制 为 2 GB; 互联 网 信息 服务 ( Internet Information 
Services ，IIS ) 默认 设置 为 4MB， 但 你 可 以 将 上 限 设 置 为 2GB; Apache Tomcat 
或 其 他 Web 服 务 器 也 类 似 。 因 此 ， 上 传 文件 大 小 的 限制 不 在 于 Ext JS， 而 是 Web 

服务 器 ， 所 以 你 需要 进行 相应 的 设置 。 


5.4 删除 用 户 


CRUD ( Create Read Update Destroy ) 操作 的 最 后 一 步 是 删除 用 户 操作 ， 我 们 在 控制 锅 里 添 
加 删除 按钮 监听 冀 : 


"users button#delete": { 
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click: this.onButtonClickDelete 
} 


当 用 户 点 击 删 除 ( Delete ) 按钮 时 ， 控 制 套 将 执行 onButtonCc1lickDelete 方 法 。 


onButtonClickDelete: function (putton，e，options) { 
Var grid= this.getUsersList(), 
record = grid.getSelectionModel() .getSelection(), 
store = grid.getStore().; 


if (store.getCount() >= 2 && record[0])t 
// 在 此 删除 交 辑 


} else if (store.getCount() == 1) { 
Ext .Msg.show(t 
title: 'Warning', 
msg: 'You cannot delete all the users from the application.' 
buttons: Ext.Msg .OrK, 
icon: Ext.Msg .WARNING 


7 


} 


实现 思路 是 验证 用 户 是 否 选择 删除 用 户 网 格 面板 的 一 些 记录 ( recora[0] 存 在 )， 并且 系统 
存在 两 个 及 以 上 的 用 户 ( 我 们 将 只 删除 一 个 )。 条 件 为 真 则 删除 用 户 ， 条 件 为 假 则 意味 着 系统 只 
有 一 个 用 户 ， 我 们 不 能 删除 这 唯一 存在 的 用 户 。 


如 采 满 足 删除 用 户 的 条 件 ， 系 统 会 提示 是 否 确 定 要 删除 所 选用 户 : 


Ext .Msg.show(t 
title:'Delete?', 
msg: 'Are you sure you want to delete?', 
buttons: Ext.Msg .YESNO, 
icon: Ext.Msg .QUESTION, 
fn: function (buttonId)t 
if (jbuttonId == 'yes')t 
Ext .Ajax.request(t 
url: 'php/security/deleteUser.php', 
params: { 
id: record[0] .get('id') 


}, 
// 成 功 与 失败 
}); 


}); 


如 果 确 定 删 除 操作 ， 将 发 送 所 选用 户 的 ID 值 到 服务 融 端 ， 并 等 待 success 或 failure 辑 数 执 
行 。 我 们 总 是 期 待 操作 能 够 成 功 ， 那 就 完 来 实现 success 函 数 : 


success: function(conn, response, options, eOpts) { 


Var result = Packt.util.Util.decodeJSON (conn.responseText); 
if (result.success) { 
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Packt .util.Alert.msg('Success!', 'User deleted.'); 
store.1oad(); 
} else { 
Packt .util.Util.showErrorMsg (conn.responseText).; 
} 
} 


记 住 , 服务 融 闪 执行 数据 库 删 除 操 作 ,， 多 效 情 况 下 我 们 只 是 执行 逻辑 删除 , 也 就 是 修改 活动 
状态 列 标识 〈 把 用 户 改 为 不 活动 状态 )。 

我 们 需 获 取 服 务 硕 痪 啊 应 ， 如 果 成 功 ， 则 显示 一 个 通知 并 重新 加 载 存 储 般 。 如 打 不 成 功 ,， 则 
像 前 几 间 的 Ajax 请 求 返回 一 样 ， 显示 一 个 错误 信息 。 


failure 上 加 数 代 人 码 如 下 : 


failure: function(conn, response, options, eOpts) { 
Packt .util.Util.showErrorMsg (conn.responseText).; 


} 
我 们 将 服务 表 问 返回 的 错误 信息 进行 催 单 的 显示 。 
接 下 来 ， 我 们 需要 做 最 后 一 个 变更 : 修改 Menu 数 据 库 表 ， 显 示 本 章 创建 的 所 有 的 组 件 和 办 


面 。 修改 className 字 上 段 为 users， 这 是 包含 用 户 网 格 面板 、 添 加 按钮 、 编 辑 按 钮 以 及 删除 按钮 
的 面板 的 xtype 值 。 


Ee 


text iconCls parent_id className | 


menul menu_admin 
menull menu groups 1 panel 
menul2z Menu_ Users 1 


现在 我 们 重新 加 载 应 用 程序 并 测试 所 有 功能 。 


5.5 小结 
本 章 讲解 了 如 何 创建 、 修 改 、 删 除 以 及 列 出 所 有 系统 用 户 。 


我 们 还 学 习 了 一 些 有 价值 的 理念 ， 比 如 在 整个 Ext JS MVC 应 用 程序 中 重用 存储 器 ， 以 及 如 
何在 控制 器 里 获取 其 引用 。 我 们 还 探讨 了 HTML5 新 特性 一 一 文件 上 传 预 览 功 能 ， 这 是 又 一 个 融 
合 使 用 其 他 技术 和 Ext JS 的 例子 。 


下 一 章 ， 我 们 将 实现 MySQL 数 据 库 表 管理 模块 ， 其 界面 与 MySQL workbench 软 件 里 的 数据 
库 表 编辑 界面 非常 相似 。 


MySQL 数 据 库 表 管理 


截至 当前 ， 我 们 实现 了 应 用 程序 的 基本 功能 。 现 在 开始 实现 其 核心 功能 ， 首 先是 MySQL 数 
据 库 表 管 理 。 这 是 什么 意思 呢 ?” 每 个 应 用 程序 都 有 无 法 直接 关联 到 核心 业务 的 信息 , 但 这 些 信息 
又 被 核心 业务 以 某 种 方式 使 用 。 比 如 , 分 类 类 别 、 用 户 语 言 、 所 在 城市 以 及 国家 ,这 些 信息 邦 独 
六 于 核心 业务 存在 并 为 核心 业务 所 用 。 我 们 把 这 些 信 息 组 织 为 独立 的 MySQL 数 据 库 表 ( 因为 我 
们 使 用 MySQL 数 据 库 服务 希 )， 在 其 上 可 以 执行 面向 MySQL 数 据 库 表 的 各 种 操作 。 


本 草 主 要 包括 以 下 内 容 : 


口 新 建 模块 Static Data ( 静态 数据 ); 

口 列 册 MySQL 数据 库 表 的 所 有 信息 ; 
口 创建 新 的 表 记 录 ; 

口 即席 搜索 表 ; 

口 过 滤 信 息 ; 

口 编辑 、 删 除 记 录 ; 

口 创建 在 所 有 表 中 重用 的 抽象 组 件 。 


6.1 呈现 数据 库 表 


如 果 我 们 打开 并 分 析 saki1la 数 据 库 目 之 的 库 表 ER 图 ( Entity Relationship， 实体 关系 图 ), 将 
看 到 下 列 数 据 库 表 : 


factor id SMALLINT 
$ first_name VARCHARI45) 
Slast name VARCHARLAS 

$last update TIMESTAMP 


hlanguage_id TINYINT 
name CHAAIEO 


category_id TINYINT 
S$ name VARCHARI25) 


Slast_update TIMESTAMP 


last update TIMESTAMP 


Weity id SMALLINT 
s city VARCHARI50) 
委 country_id SMALLINT 
Slat update TIMESTAMP 


hcountry_id SMALLINT 
scountry VAACHARAISO 
S lat update TIMESTAMP 


这 些 表 可 以 独立 于 其 他 表 存 在 ， 我 们 将 在 本 童 使 用 它们 。 


当 我 们 在 MySQL Workbench 中 打开 SQL Editor ( SQL 编辑 器 )， 可 以 选中 一 个 表 ; 右 击 并 选择 
Edit Table Data (〈 编辑 表 数 据 )。 按 此 操作 ， 将 打开 一 个 新 的 标签 页 ， 如 下 图 所 示 : 


起 | Edit: [全 二 同 三 可 Export: 


“ast_name last_update 


Jactorid firstname a 
-1 PENELOPE GUINESS 2006-02-15 04:34:33 
NICK WAHLBERG 2006-02=15 04:34:33 
ED CHASE 2006=02=15 04:34:33 
JENNIFER DAVIS 2006-02-15 04:34:33 
JOHNNY LOLLOBRIGIDA 2006-02-15 04:34:33 
BETTE NICHOLSON 2006-02=15 04:34:33 
GRACE MOSTEL 2006-02-15 04:34:33 
MATTHEW JOHANSSON 2006-02-15 04:34:33 
JOE SWANK 2006-02-15 04:34:33 
CHRISTIAN GABLE 2006-02=15 04:34:33 
ZERO CAGE 2006=02=15 04:34:33 
KARL BERRY 2006-02-15 04:34:33 
UMA WDOD 2006-02-15 04:34:33 


这 个 表 是 actozr 表 ( 演员 表 ys 我 们 打算 对 每 个 所 选 表 都 实现 与 这 相似 的 界面 : ACtors. 
Categories、Languages、Cities 和 Countries (演员 、 类 别 、 用 户 语言 、 所 在 城市 以 及 国 
家 等 各 表 )， 如 下 图 所 示 ( 这 也 是 本 董 最 终 要 实现 的 效果 ): 


104 ”第 6 章 MySQL 数据 库 表 管理 


Video Store Manager - Mastering Ext J5 English ~ 

四 Menu | 二 Harme | 可 =| Actors 一 

下 Security +| 加 hdd | 局 Sechanges 辣 Camcel Changes | “及 ClearFilters 
| static Data < = | [| Regular expressio 
Last Name Last Update 
GUINESS 2006-02-15 04:34:33 
WAHLBERG 20060-02-15 O04:44:44 
CHASE 2006-02-15 04:34:43 
DAVIS 2006-02=15 04:34:33 
LOLLOBRIGIDA 2006-02-15 04:34:33 
NICHOLSON al006-02-15 04:34:33 
MOSTEL 2000-02-15 O44:44 
IOHANSSmN _ HG-02-15 NA4: 和 :3 


DOOGOO00000 


1 
过 
3 
本 
| 到 
在 
| 取 
及 


Mastering Extls book = Loiane Groner -= http:/ /packtpub.com 


本 章 的 目标 是 以 最 少 的 代码 实现 这 五 张 表 的 界面 。 也 就 是 说 我 们 布 望 创 建 最 通用 的 代码 , 方 
便 以 后 代码 维护 和 功能 增强 ， 而 且 以 通用 功能 为 基础 ， 创 建新 的 界面 也 将 变 得 更 容易 。 


让 我 们 继续 。 


6.2 创建 模型 
一 般 情况 下 我 们 先 创建 模型 。 首 先 列 出 涉及 的 数据 库 表 及 其 字段 。 


DActor actor id、 first name、 last name、 last update 
Category category id、 name、 last update 
Language language id、 name、 last update 

DCity city id、 city、 country_ id、 last update 


Country country _ id、 country、 last_ update 


完全 可 以 为 每 个 实体 都 创建 一 个 模型 , 但 是 我 们 希望 尽 可 能 重用 代码 。 再 看 看 列 出 的 表 和 字 
段 ， 注 意 所 有 表 郡 有 个 相同 的 字段 : last_update。 


所 有 表 都 有 同一 列 1last_upaate， 因 此 我 们 可 以 创建 一 个 模型 超 类 ， 然 后 再 创建 各 表 对 应 
的 特定 模型 (扩展 日 模型 超 类 ， 不 需要 再 声明 last_update 列 ) 这 样 不 是 挺 好 吗 ? 


6.2.1 抽象 模型 


面向 对 象 编程 (Object Oriented Programming，OOP ) 里 有 个 继承 的 概念 ， 是 一 种 重用 已 有 
对 象 代 码 的 方式 。Ext JS 使 用 OOP 方 法 ,因此 我 们 可 在 ExtJS 应 用 程序 里 使 用 这 个 概念 。 如 果 回 头 
看 看 已 实现 的 代码 ， 会 发 现 我 们 已 经 在 大 部 分 类 里 应 用 了 继承 的 概念 (utili 包 除外 )， 但 我 们 还 
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只 是 创建 Ext JS 类 的 继承 类 。 现 在 ， 我 们 来 创建 目 己 的 超 类 。 


既然 我 们 需要 的 模型 都 有 last_update 字 段 (仔细 观察 会 发 现 所 有 的 sakila 数 据 库 表 都 有 
这 个 字段 ), 接 下 来 就 创建 包含 这 个 字段 的 模型 超 类 。 在 app/modelsakila 目 录 下 创建 新 文件 Sakila.js: 


Ext .define('Packt.model.sakila.Sakila', f{ 
extend: 'Ext.data.Model', 


fields: [| 
{ 
name: 'last update', 
type: 'date', 
dateFormat: 'Y-m-] H:1i:s' 


} 
] 
}); 
后 面 我 们 将 学 习 怎 样 用 Sencha 命 令 行 工 具 构 建 产 品 ， 它 使 用 了 YUI Compressor (YUI 压 缩 工 
具 ) 压 缩 代 码 。 因 为 这 个 原因 , 我 们 不 能 用 “abstract” 这 个 单词 作为 包 名 。 虽然 将 Packt .model. 
abstract .Sakila 作 为 类 名 非常 合适 ， 但 我 们 不 能 这 样 使 用 。 


这 个 模型 只 有 一 个 last_update 字 上 段 。 在 表 里 ， last_update 字 段 为 tmestamp ( 时间 惟 ) 
类 型 ， 因 此 ， 这 个 字段 是 日 期 型 ， 并 且 应 用 了 Y-m-j H:i:s 日 期 格式 〈year-month-day 
hour:minutes:seconds, 年 -月 -日 时 :分 : 秒 ), 跟 数据 库 里 的 格式 一 样 (如: 2006-02-15 04:34:33 )。 


接 下 来 我 们 创建 表示 每 张 表 的 模型 ， 不 需要 再 次 声明 last_update 了 。 


6.2.2 ”特定 异型 


现在 ， 我 们 创建 表示 每 张 表 的 所 有 模型 。 我 们 先 来 实现 Actor 模 型 。 在 app/modelstaticData 
日 录 下 创建 新 文件 Actor.js ， 并 创建 新 类 Packt.model.staticData.Actor: 


Ext .define('Packt.model.staticData.Actor', f{ 
extend: 'Packt.model.sakila.Sakila', // #1 


lidProperty: 'actor id', // #2 


fields: [| 
{ name: 'actor_ id' }, 
{ name: 'first name'}, 
{ name: 'last name'} 


}); 


与 前 面 创 建 的 模型 类 相 比 ， 此 处 有 两 个 不 同 地 方 。 扩 展 类 (#1 ) 不 是 Ext .data.Model, 而 
是 Packt.model.sakila.Sakila。 sakila 模 型 类 已 扩展 日 Ext .data. Model 类 ， Packt. 
model .staticData.Actor 类 扩展 日 sakila 模 型 类 。 也 就 是 说 Actor 模 型 类 继承 saki1a 模 型 
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类 ， 而 Sakila 模 型 类 继承 Ext .data .Model 类 0 这 样 我 们 的 Actoz 模 型 类 就 继承 了 所 有 
Ext .data. Model 类 特性 以 及 saki1la 模 型 类 的 las Et update 


男 一 个 不 同 地 方 是 ijdProperty (#2 ),。 默认 情况 下 ，idqProperty 属 性 值 为 ia。 这 样 当 我 们 
声明 一 个 带 有 名 为 id 字 段 的 模型 时 ，ExtJS 会 目 动 识 别 这 是 模型 的 唯一 字段 ( Unique Fields )。 当 
idProperty 属 性 值 不 为 id 时 , 我们 需要 显 式 指明 idqProperty 属 性 值 。 由 于 所 有 的 Sakila 数 据 
库 表 都 没有 名 为 id 的 唯一 字段 ，iaqProperty 属 性 值 将 设置 为 “实体 名 称 +_ id” 格式 。 我 们 需要 
在 所 有 特定 模型 中 显 式 声明 idqProperty 属 性 。 


现在 ， 对 其 他 模型 类 进行 类 似 的 操作 ， 创 建 4 个 模型 类 : 


D Packt.modqel .staticData.Catedory 
UD Packt .model .staticData.Language 
UD Packt .model .staticData.City 

D Packt .model .staticData.Country 


最 终 ，app/model/staticData 包 里 有 5 个 模型 类 。 如 果 用 UML 类 图 来 表达 模型 类 ， 将 如 下 图 所 示 : 


last_update 


Category Language City Country 


actor_id category id language id city_id country id 
first name name name city country 
last name country_id 


Actor、 Category、 Language.、 city 和 Country 模 型 类 痢 扩 展 自 saki1a 模 型 类 ， Sakila 
模型 类 扩展 日 Ext .data. Model 模 型 类 ， 


由 
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下 一 步 我 们 创建 每 个 模型 对 应 的 存储 带 。 正 如 我 们 实现 模型 的 方式 , 我 们 同样 将 创建 一 个 通 
用 存储 带 。 虽然 这 个 通用 配置 不 在 存储 带 中 ， 而 是 在 代理 属性 配置 项 里 , 但 通过 存储 俘 超 类 能 够 
监听 所 有 静态 数据 存储 带 的 通用 事件 。 


我 们 将 创建 Packt .Store.staticData.Abs txzact 新 存储 器 。 
由 于 每 个 模型 对 应 一 个 存储 咒 ， 所 以 我 们 需 创建 以 下 存储 需 : 


了 


DD Packt.store.staticData.Actors 
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UD Packt.store.staticData.Categories 
D Packt.store.staticData.Languages 
UD Packt.store.staticData.Cities 


DD Packt.store.staticData.Countries 


最 重要 的 配置 是 在 代理 属性 配置 项 里 声明 的 url1、reader 和 writer 等 内 容 。 其 中 一 些 配 置 
对 staticpata 包 中 所 有 存储 器 来 说 都 是 一 样 的 。 因 此 ， 我们 创建 一 个 超级 代理 类 
Packt .proxy.StaticData, 从 而 尽 可 能 重用 代码 。 


最 后 ,创建 上 述 类 ， 其 UML 类 图 表示 如 下 : 


Abstract Store 


StaticData Proxy 


所 有 的 存储 需 类 者 扩展 目 Abstract 存 储 人 名 类 , 并 在 属性 设置 里 部 有 staticpata 代 理 配置 项 。 
现在 ， 我 们 理 清 了 思路 ， 下 面 就 动手 吧 ! 


6.3.1 抽象 存储 器 


我 们 首先 创建 Packt .Store.staticData. Abstract 类 & 我 们 并 未 在 其 中 声明 太 多 配置 
项 ， 创 建 这 个 类 唯一 的 目的 就 是 声明 一 个 store.staticData 包 中 所 有 存储 兹 都 有 的 storeId 
属性 : 


Ext .define('Packt.store.staticData.Abstract', f{ 
extend: 'Ext.data.Store', 


storeId: 'staticDataAbstract' 
上 


所 有 的 特定 存储 天 都 扩展 目 这 个 存储 俘 。 创 建 一 个 这 样 的 存储 角 超 类 感 沉没 有 多 大 意义 。 但 
是, 我 们 并 不 知道 将 来 维护 时 还 得 沃 加 多 少 通用 的 存储 表 配 置 项 。 万 一 个 这 么 做 的 理由 是 , 在 控 
制 画 里 我 们 也 能 监听 存储 需 事 件 〈《Ext JS 4.2 及 以 上 版 本 可 用 )。 如 采 我 们 打算 监听 一 系列 存储 融 
的 同一 事件 并 执行 同一 方法 ， 有 了 存储 融 超 类 就 能 够 节省 很 多 行 代 码 。 


6.3.2 ”抽象 代理 类 
接 下 来 创建 代理 超 类 。 我 们 将 在 其 中 实现 staticData 包 里 各 个 存储 融 的 所 有 通用 配置 项 。 
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我 们 要 一 步 步 完 成 。 首先 , 在 app 目 录 下 创建 子 目 录 proxy。 然后 , 在 proxy 里 创建 StaticData.js 
新 文件 ， 如 下 图 所 示 : 


各 各 和 自 到 | app 


ED 国 忆 IDIEDTIEOTE3 


5 


FAYORITES shared Folder 


HARED > ame 
© app.js 
Ep 上 -ontrnller 
| 国 modal 
的 proxYy 
响 staticData.js 
b> 和 启 | store 
b> 而 | view 


很 显然 ， 类 名 应 该 是 Packt .proxy.StaticData。 先 来 声明 类 的 基本 框架 : 


Ext .qdqefline(' Packt.Droxy.StaticData'，({ 
extend: 'Ext.data.proxy.Ajax', 
alias: 'proxy.staticdataproxy', // #1 


type: 'ajax' // #2 
py 
分 配 别名 给 代理 类 (#1 )。 给 扩展 目 Ext JS 组 件 类 的 所 有 类 ( 如 网 格 面 板 、 树 形 面 板 、 表 单 
面板 ， 等 等 ) 分 配 别 名 时 ,使 用 wiqget .前 级 ,后面 加 上 我 们 分 配给 它 的 xtype 值 (全 部 小 写 )。 
对 于 代理 类 的 别名 设置 也 基本 类 似 ， 但 前 级 为 proxy， 后 面 加 上 代理 名 称 。 


下 一 步 ， 配 置 代理 类 型 ( 夫 )。staticData 包 里 所 有 的 存储 需 都 通过 Ajax 调用 方式 与 服务 
器 端 通信 。 


之 后 ， 配 置 readqezr 属 性 项 ， 该 属性 描述 从 服务 融 端 读 取 数 据 的 方式 : 


reader: { 
type: 'jJson', 
messageProperty: 'msg', 
root: 'data' 


} 
同 以 往 一 样 ， 我 们 使 用 JSON 作 为 服务 器 端 与 Ext JS 间 交换 数据 的 格式 。 我 们 通过 JSON 对 象 
的 data 属 性 包装 模型 集合 ， 还 打算 通过 msg 属 性 (从 服务 器 端 ) 发 送 额 外 信息 给 Ext JS 。 


我 们 讲解 了 怎样 通过 readqer 从 服务 表 病 谈 取 数据 , 接 下 来 看 看 如 何 通 过 writer 返 回 数据 给 
服务 名 站 : 


writer: { 


type: 'json', // #3 
writeAllFields: true, // #4 
encode: true, // #5 
allowSingle: false, // #6 
root: 'data' // #7 


} 


我 们 依旧 通过 JSON 对 象 返回 数据 给 服务 融 端 ( 攀 )。 以 下 是 返回 给 服务 融 端 的 数据 格式 样 例 
( Actor 模 型 ): 


( 


"data": [{ 
"last update": "2013-01-28 13:42:00", 
"actor 1d" 下 二 
"first name": "PENELOPE", 
"last _ name": "GUINESS " 


}] 
} 
writeAllFields 配 置 项 ( 值 为 true ) 表示 ExtJS 总 是 返回 所 有 模型 字段 给 服务 需 i ， 不 管 
字段 是 否 有 更 新 ( 杖 )。 我们 以 Actor 模 型 为 例 ， 假设 我 们 编辑 了 Actor 模 型 类 的 last_name 列 ， 
就 应 该 将 Actor 模 型 信息 返回 给 服务 右 端 执行 UPDATE 数 据 库 操作 。 由 于 writeAllFields 设 为 
true， 就 会 返回 ida、first_name ( 尚未 更 新 ) 以 及 last_name (有 了 新 值 ) 等 字段 。 对 于 所 
有 和 字段， 执行 以 下 UPDATE 操 作 ( 即使 所 有 的 列 都 没有 更 新 过 ): 


UPDATE Actor 


SET 
first name = {first name: }, 
last name = {last name: }, 


last update = {last update: CURRENT TIMESTAMP } 
WHERE actor_id= {actor id}; 


如 果 将 wri teAllFields 设 置 为 false, 我 们 束 得 核实 返回 服务 需 冰 的 字段 ， 并 动态 地 创建 
SET 语 句 。 因 此 ， 为 了 市 省 时 间 ， 我 们 将 writeAllFields 设 置 为 true。 


之 后 ， 设 置 encode 属 性 配置 项 为 true( 拓 )。 这 车 味 着 我 们 将 发 送 经 过 编码 的 JSON 格 式 数 
据 , 而 韭 gata 原 样 格 式 。 


接着 将 allowSingle 属 性 配置 项 设置 为 false (#6 )。 也 就 是 我 们 总 是 把 发 送 给 服务 术 请 的 
县 用 方 括号 “[]” 包 痛 起 来 ， 即 使 是 只 发 送 一 个 模型 实例 信息 。 如 采 我 们 未 考虑 到 服务 硕 端 的 
某 种 请 形 ( 后 面 会 提 到 )， 就 会 碰 到 令 人 头疼 的 事情 。 


当 我 们 发 送 一 个 模型 实例 到 服务 希 端 (执行 创建 、 修 改 或 删除 操作 ) 时 ,并 不 能 保证 顺利 完 
成 不 出 错 〈 我 们 乔 望 如 此 ， 但 往往 事 不 遂 人 愿 ， 错 误 、 寞 毅 很 可 能 发 生 )。 当 通 过 存储 从 编辑 或 
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创建 一 条 记录 时 ， 模 型 实例 被 标识 为 “ 脏 ”。 这 样 当 执行 sync 方 法 时 存储 器 就 知道 需要 发 送 哪 些 
数据 到 服务 豆 端 。 如 条 动 作 顺 利 完 成 ， 返 回 确认 信息 (acknowledement，ACK ) 到 Ext JS 端 说 明 
动作 完成 ， 同 时 存储 融 从 模型 实例 中 移 除 “及 ”标识 。 如 采 动 作 不 成 功 ， 服 务 需 端 将 返回 一 个 异 
第 ， 或 者 success 值 置 为 false， 存 储 带 不 会 移 除 要 保存 的 模型 实例 的 “ 脏 ” 标 识 。 


然而 , 假设 我 们 再 编辑 为 一 个 模型 ,接着 保 和 存 它 。 如 琳 前 面 的 模型 未 保存 ， 当 我 们 再 次 执行 
存储 名 的 sync 方 法 时 ， 存 储 表 就 会 发 送 两 个 模型 实例 至 服务 着 庙 ， 并 且 将 信息 包 效 在 方 括号 内 。 
如 来 不 把 信息 包 帕 在 方 括号 内 ,就 发 送 多 个 模型 实例 至 服务 侣 问 ， 这 种 情形 下 ,服务 侣 端 就 会 抛 
出 错误 或 寞 第。 因此 为 了 避 开 这 种 验证 模式 ， 我们 用 方 括号 包 波 数据 ; 这 种 方式 下 ,我们 只 需 编 
写 一 段 代 码 即 可 。 


最 后 ， 把 发 送信 息 包 淡 在 data 属 性 里 (#7 )， 跟 我 们 从 服务 益 闹 读 取 数据 一 样 。 


接 下 来 ,我 们 将 在 代理 中 添加 安全 性 配置 项 。 改 变 读 取 动作 的 动作 方法 : 


actionMethods: { 
create: "POST", 
read: "POST"，// 改 为 POST 
update: "POST'" ， 
destroy: "POST" 
} 


当 使 用 Ajax 方式 与 服务 估 端 交换 数据 时 ， 创 建 、 修 改 和 销毁 〈 删 除 ) 等 动作 通过 PosT 方 法 
发 送信 息 至 服务 右 端 。 读 取 动 作 默 认 使 用 cET 方 法。 但 是 ,我 们 将 更 改 读 取 动作 为 POST 方 法 。 这 
样 ， 所 有 的 参数 都 通过 PosT 方 法 传送 ， 而 非 查 询 字 符 串 方式 〈 将 参数 添加 在 URL 里 ， 比 如 
http://localhost/masteringextjs/php/staticData/actor/create.php?entity=Actor )。 


在 继续 之 前 ， 思 考 一 下 为 什么 要 创建 代理 超 类 。 我 们 有 5$ 个 模型 类 : Actor、Category、 
Language、City 和 country。 我 们 希望 这 样 执行 SELECT 查 询 : 


SELECT * FROM Actor 


我 们 要 从 名 为 Actor 的 表 中 获取 所 有 记录 。 这 里 作为 静态 数据 模型 ， 并 不 使 用 远程 排序 、 过 
滤 或 分 页 ， 因 此 ， 使 用 简单 的 SELECT 语句 就 可 以 。 我 们 也 可 以 把 Actor 和 替换 为 其 他 表 和 名 : 
category、Language、City 或 Country。 如 条 我 们 能 够 发 送 表 名 至 获取 记录 的 服务 硕 端 承 更 
好 了 ， 这 样 就 可 以 用 同一 URL 获 取 数 据 库 表 记录 ， 这 正 是 我 们 要 做 的 。 


对 删除 、 修 改 和 创建 记录 等 操作 ， 当 用 简单 PHP 代 码 替 代 面 向 对 象 PHP 代 码 方式 时 ， 想 要 通 
过 同一 代码 执行 DELETE 、UPDATE 和 和 INSERT 语句 是 不 可 能 的 。 但 我 们 可 以 使 用 同一 URL， 获 取 
表 名 ， 重 定向 至 特定 代码 。 


也 就 是 说 , 我 们 可 以 使 用 同一 URL 人 处理 所有 的 CRUD 操 作 : 创建 、 旋 取 、 修 改 和 销毁 (删除 ): 


api: { 
read : 'php/staticData/list.php', 
create : 'php/staticData/create.php', 
Update : 'php/staticData/update.php', 
destroy : 'php/staticData/delete.php' 


} 


最 后 ， 添 加 一 个 异 笛 监 听 带 ， 在 寞 笛 发 生 时 显示 信息 给 用 户 。 


listeners: { 
exception: function(proxy, response, operation)t 
Ext .MessageBox. show(t{ 
title: 'REMOTE EXCEPTION', 
msg: operation.getError(), 
icon: Ext.MessageBox.ERROR, 
buttons: Ext.Msg .OK 


} 


现在 , 我 们 所 有 的 配置 部 完 成 了 ! 这 样 做 最 大 的 好 人 处 就 是 : 集中 编写 一 段 代 码 就 能 实现 所 有 
特定 存储 如 的 此 功能 ， 而 不 需要 在 每 个 特定 存储 可 中 重复 编写 这 些 代 人 码 。 


6.3.3 ”特定 存储 器 6 


下 面 就 来 实现 Actors、 Categories、Languages、 cities 和 Countries 存 储 顺 。 


先 创 建 Actors 存 储 髓 : 


EXt .define('Packt.store.staticData.Actors', 1{ 
extend: 'Packt.store.staticData.Abstract', // #1 


requires: | 
'Packt .model .staticData.Actor', // #2 
'Packt .proxy.StaticData' // #3 


] ， 
model: 'Packt.model.staticData.Actor', // #4 


proxy: { 
type: 'staticdataproxy', // #5 
extraParams: { 
entity: 'Actor' // #6 


| 


定义 存储 带 后 ,我 们 需 指 定 扩展 存储 人 郁 关 。 由 于 我 们 使 用 了 存储 从 超 类 ,可 以 二 接 扩 展 目 这 


个 超 类 (#1 ， 超 类 扩展 自 Ext .data.Store 类 )。 
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接 下 来 ， 我 们 声明 recuires 属 性 配置 项 《加 )。 通 第 情况 下 需要 声明 模型 类 (# )。 由 于 我 
们 还 使 用 了 静态 数据 代理 类 的 xtype (大 )， 就 需要 事先 在 内 存 中 加 载 此 类 ( 井 )， 让 Ext JS 能 够 
顺利 通过 其 xtype 实 例 化 该 代理 类 (Ext JS 实例 化 代理 类 时 ， 如 果 这 个 代理 类 不 是 原生 代理 ， 也 
未 加 载 至 内 存 ，Ext JS 将 因 无 法 识别 这 个 类 而 抛 出 异 凋 )。 


最 后 ， 需 要 有 一 个 proxy 声 明 。 代 理 的 type 是 前 面 创建 的 静态 数据 代理 。 针 对 每 个 特定 存 
储 器 的 唯一 属性 配置 项 是 entity (#6 ), 其 值 为 取 回 记录 对 应 的 数据 库 表 名 称 。 这 个 参数 将 在 每 
一 次 从 存储 器 至 服务 器 端的 请 求 中 发 送 。 


要 着 重 关注 创建 、 删 除 、 读 取 和 修改 读 写 器 的 URL, 以 及 其 他 并 未 在 此 列 出 但 常 在 代理 类 中 
配置 的 信息 。 因 为 我 们 已 不 用 再 处 理 ， 所 有 这 些 都 在 代理 超 类 里 实现 了 。 


6.4 创建 菜单 项 
在 创建 界面 之 前 ， 我 们 需要 在 动态 菜单 中 添加 革 单 项。 针对 Menu 表 执行 以 下 脚本 代码 ; 


INSERT INTO ‘sakila '. Menu ( ‘id’, ‘text , ‘iconCls ) 
VALUES ('4', 'staticData', 'menu staticdata').; 


首先 ， 添 加 一 个 名 为 Static Data 的 菜单 模块 。 


INSERT INTO ‘sakila . Menu ( text ， “iconCls , ‘parent id’, ‘className ) 


VALUES 

('actor', 'menu actor', '4', 'actorsgrid'), 
('category', 'menu category', '4', 'categoriesgrid'), 
('language', 'menu language', '4', 'languagesgrid'), 
('city', 'menu city', '4', 'citiesgrid'), 

('country', 'menu country', '4', 'countriesgrid'); 


接着 ， 添 加 Static Data 有 荣 单 的 每 个 子 荣 单项 。 


Menu 表 如 下 图 所 示 : 


sa | Menu 总 

Filter: | | Bit | Export: 本 | 

| 记 text iconcls parent id className 
menul menu_admin mm 
menull Menu _ groups 1 panel 

menulz Menu_ Users 1 Users 
staticData menu staticdata 

actors menu actor 上 actorsgrid 
categories menu_category #4 categoriesgrid 
languages menu_language # languagesgrid 
Cities menu_city 站 citiesgrid 
countries menu country #4 countriesgrid 


1 
也 
3 
加 
5 
6 
了 
8 
9 
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因为 我 们 登录 时 输入 的 用 户 名 是 adamin (管理 员 ) 用 户 组 的 一 员 , 我 们 也 手动 同 数据 库 中 添 
加 该 用 户 组 的 所 有 权限 : 
INSERT INTO ‘sakila . Permissions  ( Menu id', ‘Group id ) 


VALUES 
4 ， 


记忆 上 忆 卢 上 


) 
( ) 
( ), 
( ), 
( ) 
( ) 


\D oo ~ OU 


在 语言 转换 文件 (en.js、es.js 和 pt.js ) 里 ， 我 们 将 添加 以 下 属性 及 其 转换 信息 : 


staticData: 'Static Data', 
actors: 'Actors', 
Categories: 'Categories', 
languages: 'Languages', 
cities: ‘Cities', 


countries: 'Countries' 


输出 效果 如 下 图 所 示 : 


命 介 合 Mastering Ext]S i 
j 国 Mastering Ext J5 Em 


Video Store Manager - Mastering ExtJs 国 Enelsh ~ | 出 Liogout 


Mastering Extjs book 一 Loiane Groner - http:/! i packtpub.com 
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现在 该 来 实现 视图 了 。 我 们 将 实现 5 个 视图 ， 分 别针 对 Actors (演员 )、Categories( 类别 )、 
Languages( 用 户 语言 )、Cities (所 在 城市 ) 以 及 Countries ( 国家 ) 等 各 表 进 行 CRUD 操 作 。 


Actors 表 管理 界面 实现 后 的 最 终 效 果 图 如 下 : 
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| 使 Home | al Actors“| % Categories | 


| 

转 Add | 局 和 ve Changes 入 tancel Changes | “| 二 ClearfFilters 

Search | < » [Regularexpression [| Case sensitive | 

rs Lt | be 

| 生 PENELOPE GUINESS 2006-02-15 04:34:33 六 | 
EE MICK WAHLBERG 2006-02-1504:34:33 部 
| 这 ED CHASE 2006-02-15 04:34:3 和 慷 
| 竹 JENNIFER DAVIS 2006-02-15 04:34:33 司 
| 5 JOHNNY LOLLOBRIGIDA 2006-02-15 04:34:33 沪 
| 而 BETTE NICHOLSON 2006-02-15 04:34:33 癌 
7 GRACE MOSTEL 2006-02-15 04:34:33 总 
| 但 MATTHEW JOHANSSON 2006-02-1504:34:33 ”局 

| Mothing Found | 


Categories 表 管理 界面 实现 后 的 最 终 效 果 图 如 下 : 


大 Ad | 态 $ave Changes 术 Cancel Changes | Clear Filters 


Search < >» | |T|Regular expression | 门 | Case sensitive 
1 Action 2006-02-1504:46:27 局 
| 宇 Animation 2006-02-15 04:46:27 届 
| 守 Children 2006-02-15 时 :46:27 各 
| 村 Classics 2006-02-15 04:46:27 篇 
5 Comedy 2006-02-15 04:46:27 总 
| 鹿 Documentary 2006-02-1504:46:27 入 
|7 Drama 2006-02-15 04:46:27 避 
8 Farmily 2006-02-15 04:46:27 六 
Nothing Found 


发 现 两 个 界面 间 的 相似 之 处 了 吗 ? 我 们 再 次 观察 一 下 : 


/ ;2 


Last Update 
2006-02-15 04:34:33 以 


2006-02-15 04:34:33 总 
2006-02-15 04:34: 扫 ”六 


最 顶层 的 工具 栏 都 一 样 (1); 都 有 一 个 即席 搜索 功能 ( Search，2 )、 过 滤 择 件 ( Filters，4 小 


6.5 创建 重用 的 抽 旭 网 格 面板 115 


最 后 修改 列 (Last Update ) 以 及 操作 列 ( action，3 )。 再 进一步 ， 两 个 网 格 面板 都 可 以 通过 单元 
格 编辑 插件 进行 编辑 。 两 个 界面 的 不 同 点 是 在 于 它们 的 列 (5 )。 这 是 不 是 意味 着 我 们 可 以 创建 具 
备 通用 功能 的 网 格 面 板 超 类 ， 并 通过 继承 达到 重用 代码 的 目的 呢 ?” 是 的 ! 


下 面 我 们 就 创建 网 格 面板 超 类 。 首先 创建 新 的 Packt .View.staticData. AbstractGrigd 类 . 


Ext .define('Packt.view.staticData.AbstractGrid', f{ 
extend: 'Ext.ux.LiveSearchGridPanel', // #1 
alias: 'widget.staticdatagrid', 


columnLines: true, // #2 
viewConfig: { 
stripeRows: true // #3 
}, 
1 


该 类 扩展 目 Ext.ux.LiveSearchGridpPanel 类 ， 而 非 Ext. grid.Panel 2 
Ext .ux. TiveSsearchGridPane1 类 本 刁 扩 展 日 extends the Ext.grid. Pane1 类 ， 并 添加 了 
即席 搜索 工具 栏 (2 )。LiveSearchGridPanel 类 是 随 Ext JS SDK 一 同 发 布 的 插件 。 你 可 以 在 
sdk/examples/ux 目 录 下 找到 它 。 我 们 把 ux 复制 到 extjs 目 录 下 (extjs/ux )。 


其 中 ， 志 和 好 配置 项 呈现 单元 格 边线 ， 并 用 日 色 和 浅 灰 色 两 种 颜色 交 答 作为 行 衣 景色 。 


第 一 次 使 用 Ext .ux 命 名 空间 时 , 需要 告诉 加 载 右 类 在 哪儿 能 找到 这 些 文件 ,打开 app.js 文 件 ， 
在 加 载 器 类 里 添加 映射 : 


Ext .Loader.setConfig(t 
enabled: true, 


paths: { 
BX ey 
1'Ext .ux': 'extjs/ux', 
'Packt .util': 'app/util' 


上 
接 下 来 是 创建 一 个 initCcomponent 方 法 。 我 们 创建 超 类 时 ， 一 些 配置 项 将 被 覆 写 ， 而 另 一 
些 不 用 。 通 常 ， 要 履 写 的 内 容 在 类 中 声明 为 配置 项 。 不 用 履 写 的 内 容 ， 在 initcomponent 方 法 
里 声明 。 由 于 有 些 配 置 项 不 用 禾 写 ， 我 们 就 在 initcomponent 方 法 里 声明 它们 : 


initComponent: function() { 
var me = this; 


me.selModel = { 
selType: 'cellmodel' // #4 
}; 


me.plugins = | 
Ext .create('Ext.grid.plugin.CellEditing', { // #5 
clicksToEdit: 1, 
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pluginId: 'cellplugin,' 
}) 
]; 


me.features = |[ 
Ext .create('Ext.ux.grid.FiltersFeature', { // #6 
local: true 
}) 
|; 
// 停 驻 项 
// 列 


me.callParent (arguments).; 


me 和 this 的 比较 
> 如 果 你 看 过 一 些 互联 网 上 的 Ext JS 人 代码， 就 会 发 现 很 多 开发 者 用 me 替代 
this。 为 什么 这 样 做 呢 ? 一 旦 this 被 大 量 使 用 ， 你 就 会 考虑 用 me 了 ， 因 为 这 将 


节省 16 比 特 并 能 更 好 地 压缩 ( 在 构建 产品 后 ， 代 码 也 将 被 压缩 )。 同 时 ，me 也 可 
用 于 我 们 需要 在 另 一 个 函数 里 管理 当前 上 下 文 作用 域 的 情形 。 


我 们 还 可 以 定义 用 户 选择 网 格 面板 信息 的 模式 : 默认 配置 是 行 选择 模式 。 由 于 我 们 希望 用 户 
能 够 编辑 单元 格 ， 因 此 采用 单元 格 选 择 模 式 (#4 )， 并 使 用 单元 格 编辑 插件 〈 药 ,已 在 ExtJS SDK 
=: 


为 了 过 滤 信 息 ( 即席 搜索 只 高 党 逻 配 记录 ), 我 们 将 使 用 过 滤 特 性 (#6 ), 过 滤 特 性 不 在 Ext JS 
SDK 里 ,你 可 以 在 ux 目录 下 找到 它 。 


接 痢 声明 停 驻 项 。 因 为 所 有 网 格 面板 都 有 同样 的 工具 栏 ， 我 们 可 以 在 超 类 中 声明 和 它 


( initc omponent 方 法 里 ): 


me.dockedItems = | 
{ 

xtype: 'toolbar', 

dock: 'top', 

itemId: 'topToolbar', 

items: I[ 

{ 

xtype: 'button', 
itemId: 'add', 
text: 'Add', 
lconCls: 'add' 
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xtype: 'tbseparator' 

}, 

{ 
xtype: 'button', 
itemId: 'save', 
text: 'Save Changes ' ， 
iconCls: 'save all' 

}, 

{ 
xtype: 'button', 
itemId: 'cancel', 
text: 'Cancel Changes ' ， 
liconCls: 'cancel' 

J 

{ 
xtype: 'tbseparator' 

}, 

{ 
xtype: 'button', 
itemId: 'clearFilter', 
text: 'Clear Filters', 
iconCls: 'clear filter' 


]; 


这 样 ， 我 们 就 有 了 Add (添加 )、Save Changes ( 保存 修改 )、Cancel Changes ( 取消 修改 ) 以 


及 Clear Filter ( 清除 过 滤 ) 等 按钮 。 


最 后 ， 我 们 添加 所 有 界面 都 有 的 两 列 (‘Last Update 列 ， 以 及 操作 列 pelete 这 两 列 后 


续 会 跟 特定 网 格 面 板 的 其 他 列 一 同 呈 现 : 


me.columns = 


[a 


Ext .Array.merge (me.columns, 


xtype 'datecolumn', 
text 'Last Update', 
width 120, 
dataIndex: 'last update', 
format: 'Y-m-j H:i:s', 
filter: true 

}, 

{ 
xtype: 'actioncolumn', 
width: 30, 
sortable: false, 
menuDisabled: true, 
items: | 

{ 
handler: function(view, rowIndex, 


this.fireEvent('itemclick', 


colIndex, item, e): 


创建 重用 的 抽象 网 格 面板 


this, 


colIndex, 


item, e) 
'delete', view, 


' 
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rowIndex, 
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}, 
jconCls: 'delete', 
tooltip: 'Delete' 


6.5.1 用 MVC 染 构 模 式 处 理 操作 列 
我 们 再 看 一 下 网 格 面板 超 类 里 的 操作 列 声明 部 分 ， 特 别 是 handle 属 性 配置 项 : 


handler: function(view, rowIndex, colIndex, item, e) ({ 
this.fireEvent('itemclick', this, 'delete', view, rowIndex, colIndex, item, e); 


} 

在 操作 列 添加 的 “按钮 ”并 不 是 组 件 (因为 它 不 是 真正 的 按钮 ， 只 是 图 片 或 图 标 )， 因此， 就 
无 法 在 控制 器 里 监听 它们 的 事件 。 但 是 ， 如 有 果 在 handle 属 性 配置 项 进行 事件 处 理 也 就 意味 着 无 
法 避 特 MVC 架构 。 因 此 ， 我 们 和 需要 在 操作 列 ( 它 是 个 组 件 ) 上 触发 一 个 日 定义 事件 并 传递 表示 
所 击 动 作 名 称 ( delete ) 的 力 外 参数 。 这 样 ， 我 们 就 可 以 在 控制 带 里 监听 这 个 事件 了 。 


6.5.2 ”在 操作 列 用 iconcls 属 性 取代 icon 属 性 


通常 ， 我 们 声明 一 个 操作 列子 项 时 ， 会 设置 icon 属 性 配置 项 为 操作 列 所 用 图 标的 路 径 ， 但 
这 种 方式 并 不 好 。 试想 奢 是 别 的 地 方 也 用 到 这 个 图 标 而 我 们 打算 做 些 改动 , 那 就 得 对 所 有 使 用 此 
图 标的 地 方 分 别 进行 手工 设置 。 

设置 按钮 图 标 时 ,我 们 可 以 在 CSS 文 件 中 创建 一 个 样式 ,并 设置 conc1ls 属 性 配置 项 。 这 种 
方式 为 日 后 的 改动 提供 了 便利 ， 只 和 需 改 动 样式 ， 所 有 用 到 该 图 标的 地 方 部 会 产生 相应 调整 。 


能 够 在 操作 列 使 用 同样 的 方式 吗 ? 能 用 iconc1ls 属 性 设置 取代 icon 属 性 (路径 设置 ) 吗 ? 
没 问 题 ! 接 下 来 看 看 怎样 实现 它 。 


首先， 我 们 需要 创建 一 个 图 标 样式 。 我 们 使 用 前 面 的 删除 按钮 iconc1s 设 置 : 


.delete { 
background-image:url('../icons/delete.png') !important; 


} 
接 下 来 ， 在 CSS 文 件 里 添加 一 个 新 样式 : 


.X-aCction-col-cell img { 
height: 16px; 
width: 16px; 
Cursor: pointer; 
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以 上 就 是 样式 设置 的 全 部 ! 接 下 来 ， 在 操作 列子 项 上 应 用 iconcls 配 置 项 : 


{ 
xtype: 'actioncolumn', 
width: 30, 
sortable: false, 
menuDisabled: true, 
items: | 
{ 
liconCls: 'delete', 
tooltip: 'Delete' 


6.5.3 ”比较 即席 搜索 插件 与 过 滤 插 件 


即席 搜索 插件 ( Live Search ) 与 过 滤 插 件 (Filter ) 都 能 帮助 用 户 快 速 找到 信息 。 本 项 目 中 两 
者 都 会 用 到 。 


即席 搜索 插件 搜索 网 格 面板 所 有 列 的 匹配 结果 。 这 种 插件 执行 本 地 搜索 ,也 就 是 说 , 如 果 使 
用 分 页 工具 栏 ， 插件 就 无 法 正常 工作 。 本 例 中 , 将 实时 显示 所 有 数据 库 记 录 ， 因 此 插件 可 以 正常 6 
工作 。 比 如 ,搜索 “ada” 会 得 到 以 下 输出 ; 


| 全 Home | 了 Actors * 


Add | 此 Save Changes 加 Cancel Changes | “\& Clear Filters 


» | [| Regular expression [| Case sensitive 
Last Update 
2006-02-15 04:34:33 
2006-02-15 04:34:34 
“2013-02-3 134:32:10 
ALAN EWFLR 2006-02-15 04:34:33 
BLBERT 2006-02-15 04:34:33 
ALBERT he a006-02-15 04:334:33 
ALEC ， Ubb-Ua-]5 04:34:44 
ANGELA HUDSQON 2006-02=15 04:34:33 
BANGELA ER: 2006-02-15 O04:34:33 
BANGELINA : 2006-02=15 OQ4:34:3434 
ANNE NY 2006-02-15 04:34:43 
AUDREY | | a006-02-15 04:34:44 
1 AUDREY l a006-02-15 "04:34:34 
加 了 Rd 


过 滤 插 件 在 存储 各 上 执行 过 滤 ， 因 此 将 匹配 结 灯 显示 给 用 户 : 


DOOO0000000000 
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他 Home | ms Actors ， 


加 rdd 大 吕 ve Changes 四 Cancel Changes 有 Clear Filters 


Search ada > | [|Regular expression | | Case sensitive 
Actor 到 Last Update 

71 1 2006-02-15 04:34:33 | 人 @ 
132 , 2006-02-15 04:34:33 国 
142 2006-02-15 04:34:33 全 @ 


加 了 matchefs) found. 


6.5.4 对 应 每 张 数据 库 表 的 特定 网 格 面板 


实现 控制 从 功能 前 的 最 后 一 步 是 实现 特定 网 格 面板 .我们 在 前 面 已 经 完成 了 黎 兰 大 部 分 功能 
的 网 格 面板 超 类 。 现 在 我 们 需要 为 每 个 特定 网 格 面板 声明 个 性 化 配置 项 。 


我 们 需要 创建 个 扩展 月 Packt .view.staticData.AbstractGrid 类 的 特定 网 格 面 板 : 


UD Packt .view.staticData.Actors 

D Packt .view.staticData.Categories 
UD Packt .view.staticData.Languages 
UD Packt .view.staticData.Cities 


DD Packt .view.staticData.Countries 


第 一 步 ， 创 建 Actors 网 格 面 板 : 


Ext .define('Packt.view.staticData.Actors', f{ 
extend: 'Packt.view.staticData.AbstractGrid', 
alias: 'widget.actorsgrid', 
store: 'staticData.Actors', // #1 
columns: | 


{ 
text: 'Actor Id', 
width: 100, 
datalIndex: 'actor_ id', 
filter: { 
type: 'numeric' // #2 


text: 'First Name', 
flex: 1, 
dataIndex: 'first name', 
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editor: { 
allowBlank: false, // #3 


maxLength: 45 // #4 
}, 
filter: { 
type: 'string' // #5 
} 
}, 
{ 
text: 'Last Name', 
width: 200, 
dataIndex: 'last _ name', 


editor: { 
allowBlank: false, // #6 


maxLength: 45 // #7 
}, 
filter: { 

type: 'string' // #8 


} 
} 
] 
}); 
首先 声明 存储 硕 (#l )， 使 用 Actors 存 储 占 。 由 于 Actors 存 储 融 在 staticData 目录 下 
( store/staticData )， 所 以 需要 带 上 子 目录 名 称 ， 否 则 ，Ext JS 会 认为 存储 需 在 app/store 目 录 里 ， 如 
此 就 会 出 错 。 


接 下 来 声明 Actors 网 格 面板 的 特定 列 (由 于 Last Update 列 以 及 Delete 操 作 列 已 在 网 格 面 
板 超 类 中 声明 过 了 ， 这 里 不 再 重复 声明 )。 

要 注意 每 列 的 eaitor 和 filtezr 必 性 配置 项 。edqitoz 必 性 配置 作用 于 编辑 操作 ， 我 们 只 在 
用 户 需 要 编辑 的 列 上 进行 属性 设置 ; 在 需要 执行 过 小 的 列 上 设置 filter 属 性 。 

例如 ，iaqa 列 并 不 需要 编辑 ， 它 是 MySQL 数 据 库 表 里 的 目 增 序列 字段 ， 因 此 ， 不 需要 设置 
editor 属 性 。 但 是 ， 用 户 可 以 基于 ID 进行 信息 过 滤 ， 因 此 ， 我 们 设置 了 filter 属 性 (加 )。 


对 夯 外 两 列 : first_name 和 last_name， 用 户 可 以 进行 编辑 ， 因 此 添加 了 editor 属 性 。 
还 可 以 像 处 理 表 单字 段 那 样 ， 设 置 客 户 端 验 证 ， 比 如 : 两 个 字段 都 不 能 为 空 (友和 #6 )、 可 输入 
的 最 大 字符 数 〈《 夫 和 的 )。 


最 后 ， 所 有 的 列 都 泻 染 为 文本 类 型 ( string )， 并 设置 first_name 和 1ast_name 了 两 个 列 的 
filter 属 性 ( 克 和 #8 )。 其 他 的 所 有 功能 都 将 在 网 格 面板 超 类 中 实现 。 


6.6 ”通用 控制 希 
现在 我 们 来 实现 静态 数据 模块 的 最 后 一 部 分 。 我 们 的 目标 是 在 一 个 控制 器 类 里 尽 可 能 实现 所 
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有 界面 的 通用 功能 ， 但 不 包括 个 性 化 功能 的 实现 。 
先 从 控制 硕 的 基础 开始 o 创建 一 个 新 类 Packt.controller.staticData.Abstract- 


Controller: 


Ext .define('Packt.controller.staticData.AbstractController', f{ 
extend: 'Ext.app.Controller', 


requires: [ // #1 
'Packt .util .Util' 
| 


stores: [| // #2 
'staticData.Actors', 
'staticData.Categories', 
'staticData.Cities', 
'staticData.Countries', 
'staticData.Languages' 


] 了 


views: [ // #3 
'staticData.AbstractGrid', 
'staticData.Actors', 
'staticData.Categories', 
'staticData.Cities', 
'staticData.Countries', 
'staticData.Languages' 


] 了 


init: function(application) { 
this.controll(t 
}); 

} 

}); 


现在 ， 声 明 requires (#1 ， 在 此 通过 一 些 方法 使 用 Util 类 )、stores (可 ， 在 此 列 出 模 
块 的 所 有 存储 器 ) 以 及 views ( 冯 ， 在 此 列 出 模块 的 所 有 视图 ， 包 括 抽 象 网 格 面板 )。 


通常 ， 我 们 还 要 实现 init 图 数 和 this.contzrol 属 性 以 在 其 中 监听 所 有 的 组 件 事件 。 


6.6.1 在 网 格 泻 染 时 加 载 网 格 面板 

我 们 布 望 在 需要 时 加 载 存 储 般 。 当 用 户 氮 击 动态 染 单 , 应 用 程序 打开 界面 时 ,网 格 面板 被 洽 
染 。 当 网 格 面板 被 泻 染 时 , 我 们 乔 望 加 载 存 储 带 。 而 达成 此 目标 需要 监听 网 格 面板 的 renqer ( 演 
染 ) 事件 。 

现在 来 看 看 最 出 彩 的 部 分 吧 。 当 声明 控制 融 所 监听 组 件 的 选择 郁 时 ， 不 能 使 用 griq 或 
gridpanel 作 为 xzrtpe,， 因 为 我 们 只 关心 静态 数据 模块 的 网 格 面板 。 我 们 也 不 希望 使 用 每 个 静态 
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数据 网 格 面 板 的 xtype (actorsgrid、categoriesgrid、anguagesgrid、citiesgrid 利 
countriesgrid ), 因为 我 们 要 实现 的 是 所 有 组 件 通用 的 功能 代码 。 好 消 奶 是 前 面 我 们 通过 继承 
方式 实现 了 网 格 面 板 超 类 ( Packt.view.staticData.AbstractGrid )， 其 xtype 为 
staticdatagrid。 


比如 ,我 们 监听 一 个 Actors 网 格 面板 的 事件 ,可 以 使 用 属性 值 为 actorsgridq 的 xtype、 超 
类 的 xtype ( staticdatagrid) 或 属性 值 为 gria/mgridpanel 的 xtype。 继承 就 是 这 么 美妙 1 


因此 ， 我 们 回 到 选择 硕 ， 使 用 staticqatagrid 并 览 昕 render 事 件 : 


"staticdatagrid": { 
render: this.render 


} 
接 下 来 声明 render 方 法 : 


render: function(component, options) { 
component .getStore().1load(); 


} 


现在 有 几 种 方式 可 供 选 择 。 我 们 可 以 在 正在 演 染 的 特定 组 件 中 获取 对 应 存储 器 并 加 载 它 ,但 
在 这 里 ， 由 于 网 格 面 板 是 以 一 个 参数 的 方式 传 进 render 事 件 ( component )， 我 们 就 可 以 通过 
getStore 方 法 获取 特定 网 格 面板 对 应 的 存储 器 ， 然 后 调用 load 方 法 。 


这 种 方式 下 ， 加 载 Actors 网 格 面板 时 ， 相 应 的 存储 表 (Actors 存 储 胡 ) 也 将 被 加 载 ; 加 载 
Categories 网 格 面板 时 ， 相 应 的 Categories 人 存储 硕 也 将 被 加 载 ， 以 此 类 推 。 


我 们 只 用 了 一 行 代码 ,就 实现 了 通用 的 逻辑 代码 ,为 所 有 毅 态 数据 网 格 面板 提 供 了 通用 功能 。 


6.6.2 在 网 格 面板 上 添加 记录 


每 个 静态 数据 网 格 面 板 的 工具 栏 上 都 有 个 添加 (Add ) 按钮 ， 点 击 这 个 按钮 ， 可 以 添加 一 个 
模型 到 存储 需 里 〈 相 应 的 ， 网 格 面板 也 会 添加 一 条 记录 )， 并 进入 编辑 状态 让 用 户 填充 信息 后 进 
行 保 存 [ 上 点击 Save Changes (保存 修改 ) 按钮 ]。 


自 完 ， 监 听 添 加 按钮 的 click 事 件 : 


"staticdatagrid button#add": f{ 
click: this.onButtonClickAdd 


} 
然后 ， 实 现 onButtonClickAgdd 方 法 : 
onButtonClickAdd: function (button, e, options) { 


var grid= button.up('staticdatagrid'), // #1 
store = grid.getStore(), // #2 
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modelName = store.getProxy() .getModel() .modelName, // #3 
cellEditing = grid.getPlugin('cellplugin'); // #4 


store.insert(0, Ext.create (modelName, { // #5 
last update: new Date ( ) // #6 
})); 


cellEditing.startEditByPosition({row: 0, column: 1}); // #7 
} 


通过 参数 , 我们 只 能 得 到 按钮 引用 。 事 实 上 , 我 们 需要 获取 网 格 面板 的 引用 ， 因 此, 通过 up 
方法 得 到 它 (#1 )。 再 一 次 使 用 网 格 面板 超 类 的 xtype 作 为 选择 占 (staticaatagrid )， 这 样 就 
能 够 使 代码 更 加 通用 。 


当 我 们 获得 网 格 面板 引用 后 ， 就 可 以 通过 getstore 方 法 获取 存储 器 引用 (#2 )。 


我 们 通过 模型 名 称 实例 化 模型 (#5 )， 以 便 在 存储 融 的 开始 位 置 插入 记录 《在 网 格 面板 的 第 
一 行 )。 继 续 从 通用 代码 角度 考虑 ， 可 以 通过 存储 咒 的 proxy 获 取 模 型 名 称 ( 妈 )。 当 实例 化 模型 
时 ， 可 以 传人 一 些 配置 项 。 我 们 希望 ast Update 列 也 被 更 新 ， 那么 就 可 以 将 其 作为 配置 项 传 
入 并 赋 以 最 新 时 间 (#6 )。 


最 后 ,需要 聚焦 该 行 的 某 个 单元 格 使 之 成 为 活动 单元 格 , 这 样 用 户 束 知道 这 个 单元 格 可 以 编 
辑 。 因 此 ， 我 们 聚焦 第 一 行 第 二 列 (第 一 列 是 ida 列 ， 不 可 编辑 ) 的 单元 格 ( 故 )。 在 这 之 前 ， 需 
有 要 获 取 单 元 格 编辑 捅 件 的 引用 ， 我 们 可 以 通过 传人 pluginId 参 数 给 getPlugin 方 法 的 方式 实现 
( #4 )。 


还 记得 吗 ? 我 们 在 Packt.view.staticData.AbstractGrid 类 的 cellEditing 单 元 格 
编辑 插件 中 声明 了 pluginId 属 性 : 
Ext.create('Ext.grid.plugin.CellEditing', { 
clicksToEdit: 1, 


pluginId: 'cellplugin' 
}) 


6.6.3 ”编辑 存在 记录 


CellEditing 插 件 会 自动 保存 单元 格 的 编辑 内 容 。 但 是 ， 当 用 户 点 击 单元 格 进入 编辑 状态 
到 完成 编辑 ， 我 们 需要 将 Last Update 列 的 值 更 新 为 最 新 时 间 。 


cellEdqiting 捕 件 有 个 eqit 事 件 能 够 满足 我 们 所 需 。 不 羡 的 是 , 控制 带 无 法 监听 插件 事件 ; 
地 运 的 是 ， 网 格 面 板 类 也 会 触发 这 个 事件 (cellEaiting 搬 件 传递 这 个 事件 给 网 格 面板 )， 因 此 
可 以 在 网 格 面板 类 监听 该 事件 。 我 们 是 在 网 格 面板 超 类 声明 事件 的 ， 因 此 在 其 中 次 加 eqit 事 件 ， 
如 以 下 粗 体 所 示 : 
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"staticdatagrid": { 
render: this.render, 
edit: this.onEdit 


} 
接 下 来 ,我 们 实现 onEqit 方 法 : 


onEdit: function(editor, context, options) { 
context.record.set('last update', new Date()); 


} 
第 二 个 参数 是 事件 (context )。 通 过 它 ， 可 以 获取 用 户 编辑 的 模型 实例 ( recorqd )， 之 后 
设置 last_update 字 上 段 为 当前 时 间 。 


6.6.4 删除， 在 控制 器 中 处 理 操作 列 


现在 , 读 取 、 创 建 和 修改 操作 都 已 实现 ,下面 实 现 删 除 操作 。 我 们 用 操作 列 的 删除 项 来 取代 
删除 按钮 。 在 前 面 的 章节 中 ,我 么 了 解 了 如 何 触 发 操作 列子 项 的 事件 以 便 在 控制 从 里 处 理 该 事件 。 
我 们 无 法 监听 操作 列子 项 触发 的 事件 ,但 可 以 监听 操作 列 触 发 的 事件 : 


"staticdatagrid actioncolumn": { 
ijtemclick: this.handleActionColumn 


} 


现在 ， 我 们 来 实现 nandleActionColumn 方 法 : 


handleActionColumn: function(column, action, view, rowIndex, colIndex, item, e) f{ 
Var Store = view.up('staticdatagrid') .getStore(), 


rec = store.getAt (rowIndex); 
if (action == 'delete')t 
store.remove (rec).; 
Ext .Msg.alert('Delete', 'Save the changes to persist the removed 


record.'); 
} 
} 


这 是 一 个 目 定 义 事件 ， 需 要 获取 操作 列子 项 传人 的 参数 。 

首先 , 获取 存储 天 以 及 用 户 点 击 删 除 的 记录 。 之 后 , 通过 第 二 个 参数 ( 操作 列子 项 动作 名 称 ) 
获悉 哪些 子 项 〈 动 作 ) 触发 了 事件 。 如 采 动 作 是 aelete， 驶 从 存储 融 移 除 这 条 记录 ， 并 提示 用 
户 点 击 Save Changes 按 钮 提交 变更 ， 这 样 人 存储 俘 中 的 模型 与 服务 俘 闯 数据 将 保持 同步 。 


6.6.5 ”保存 变 


用 户 执行 修改 、 删 除 或 创建 操作 之 后 ， 变 更 过 信息 的 单元 格 都 有 个 标识 〈“ 脏 ”标识 告知 存 
储 帮 修改 了 哪个 模型 )， 如 下 图 所 示 : 


126 第 6 章 MySQL 数据库 表 管 理 


Home | BS Actors |: 

轩 ndd | 吻 Sve Changes 人 Cancel Changes | “\&& Clear Filters 
Search < > | [Regularexpression [| Case sensitive 
hctor 到 First Mame Last Name Last Update 

"First Name "Last Name "2013-02-3 11:05:00 
PENELOPE GUINESS 2006-02-15 04:34:33 
NICK-updated WAHLBERG "2013-02-3 11:04:05 
ED CHASE 2006-02-15 04: 科 :33 
]ENNIFER "DAVIS-updated "201302-3 11:05:00 
JOHNNY LOLLOBRIGIDA 2006-02-15 04:34:33 
BETTE NICHOLSON 2006-02-15 04:34:33 
GRACE MOSTEL 2006-02-15 04:34:33 


F 


® 
二 
一， 
一， 
二 
ES 
二 
动 


采用 同样 方式 ， 我 们 可 以 通过 保存 变更 信息 (提交 ) 在 MySQL 数 据 库 表 中 执行 修改 。 这 就 
是 创建 Save Changes 按 钮 的 原因 ， 这 样 就 可 以 立刻 将 变更 信息 同步 到 服务 需 端 。 


因此 ， 首 先 在 this .control 里 添加 一 个 监听 着 : 


"staticdatagrid button#save": { 
click: this.onButtonClickSave 


} 
接 下 来 实现 onButtonClickSave 方 法 : 


onButtonClickSave: function (button, e, options) { 
button.up('staticdatagrid') .getStore() .sync();} 
} 


这 个 方法 的 代码 人 简洁 明了 ， 我 们 只 需 获 取 网 格 面 板 的 存储 器 ， 然 后 调用 sync 方 法 即 可 。 
autoSync 属 性 配置 项 


存储 人 有 个 autosync 属 性 配置 项 。 默 认 值 为 false， 如 果 设 为 true， 存 储 售 会 在 检测 到 变 
更 后 自动 与 服务 器 端 同步 数据 。 这 一 点 说 不 上 好 坏 ， 取 决 于 我 们 怎么 利用 它 。 


如 何 设 置 autosync 属 性 取决 于 我 们 的 变更 频率 。 例 如 ， 对 Categories (类 别 ) 界面 ， 用 户 不 
会 频 党 对 类 别 进 行 增删 改 ， 变 更 就 很 少 ， 这 样 将 autosync 设 置 为 true 就 没 问 题 。 


现在 假设 用 户 需 要 频繁 增删 改 记 录 。 这 时 ， 如 果 将 autoSsync 设 置 为 true 就 非常 危险 。 按 这 
种 频率 ，Ext JS 会 发 送 大 量 查 询 到 服务 絮 端 ， 服 务 絮 端 就 有 可 能 将 其 当 作 DoS 攻 去 
( Denial-of-Service attack， 拒 绝 服务 攻击 ) 而 中 断 这 些 请 求 。 这 是 因为 对 于 每 个 增删 改 操作 ，Ext 
JS 都 会 发 送 一 个 请 求 给 服务 器 端 ， 这 就 是 不 同 于 将 autosvync 设 置 为 false 时 的 地 方 。 如 果 有 大 
量 数据 要 执行 增删 改 操作 ， 这 种 方式 的 商 端 可 想 而 知 ， 因 此 ， 当 设置 autosync 为 true 时 就 要 非 
常 小 心 。 
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Denial-of-service attack。 


| 若 希 望 了 解 更 多 关于 DoS 攻 击 的 内 容 ， 请 参考 http://en.wikipedia.org/wiki/ 


6.6.6 ”取消 变更 


就 像 用 户 可 以 保存 变现 ( 提交 ) 一 样 ， 用 户 也 能 取消 变更 ( 回 深 )。 我 们 要 做 的 就 是 重新 加 
载 存储 名 获取 服务 胡 端 最 新 信息 ， 这 样 客户 端 用 户 进行 的 所 有 变更 都 将 失效 。 


此 ， 我 们 需要 监听 该 事件 : 


"staticdatagrid button#cancel": { 
click: this.onButtonClickCancel 
} 


并 实现 相应 方法 : 


onButtonClickCancel: function (button, e, options) { 
button.up('staticdatagrid') .getStore() .reload () ; 


| 6 
如 果 你 愿意 ， 还 可 以 添加 一 户 是 否 确定 回 深 变更 的 提示 。 通 过 存储 右 调 用 reload 方 法 
可 以 完成 回 Re. 


6.6.7 ”清除 过 滤器 


在 网 格 面 板 上 使 用 Filters 插 件 时 ， 一 切 工 作 都 按照 我 们 的 意愿 进行 得 很 顺利 ( 执行 本 地 搜索 
的 情况 下 ), 但 还 有 一 件 事情 我 们 没 做 :提供 随时 清除 过 滤 融 的 选项 ,因此 需要 实现 一 个 Clear Filter 
( 清除 过 滤 融 ) 按钮 。 


首先 监听 有 关 事 件 : 


"staticdatagrid button#clearFilter": { 
click: this.onButtonClickClearFilter 


} 
然后 实现 该 方法 : 


onButtonClickClearFilter: function (button, e, options) { 
button.up('staticdatagrid') .filters.clearFilters(); 
} 


当 使用 过 ee 过 网 格 面 板 获 取 filters 属 性 。 然 后， 我 们 只 需 调用 clearFilters 
方法 即 可 。 这 样 就 会 | 才 滤 各 列 的 过 滤 值 ， 并 清除 存储 右 中 的 过 滤 需 。 
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6.6.8 在 控制 器 中 监听 存储 器 事件 


最 后 ,监听 存 储 表 的 write 事件 。 我 们 已 经 为 代理 添加 了 exception 异 滑 监 听 骨 ,现在 来 沫 
加 成 功 情形 的 监听 答 。 


第 一 步 ， 在 控制 器 中 监听 存储 器 事件 。 请 注意 ， 这 里 无 法 使 用 Ext JS 4.0.x 和 4.1.x 版 本 ， 这 个 
特性 需要 Ext JS 4.2.x+ 版 本 。 


在 控制 大 init 函 数 中 添加 以 下 代码 : 


this.listenl(t 
store: { 
'#staticDataAbstract': { 
write: this.onStoreSync 
} 
} 
}); 


我 们 可 以 在 store 属 性 里 监听 存储 胡 事 件 。 创建 存储 侣 超 类 时 ,我 们 说 过 需要 在 其 中 监听 事 
件 ,， 所 有 子 类 都 包括 在 内 。 这 也 是 创建 存储 融 超 类 的 原因 ,这样 就 不 需要 监听 每 个 特定 静态 数据 
存储 融 类 的 事件 了 。 


存储 洽 任 何 时 候 收 到 服务 融 斋 啊 应 郡 会 触发 write 事件 。 接 下 来 实现 该 方法 : 


onStoreSync: ftunction(Store，operat1ion，options ) { 
Packt .util.Alert.msg('Success!', 'Your changes have been saved.'); 


} 


我 们 简单 地 显示 一 条 信息 ,表明 变更 被 保存 了 。 请 注意 这 个 信息 也 是 通用 的 , 可 被 各 个 静态 
数据 模块 所 用 。 


6.7 小结 


在 本 章 ， 我 们 介绍 了 如 何 实现 看 起 来 与 MySQL 数 据 库 表 编 辑 硕 很 相似 的 界面 。 本 章 最 重要 
的 内 容 就 是 通过 OOP 的 继承 概念 实现 抽象 类 。 通 党 ,我 们 习惯 于 在 服务 需 端 语言 中 运用 这 个 概念 ， 
比如 PHP、Java、.NET 等 。 而 本 章 曾 述 了 在 Ext JS 上 运用 这 些 概念 的 重要 性 。 通 过 这 种 方式 ， 我 
们 可 以 重用 大 量 代码 ， 实 现 供 多 个 组 件 使 用 的 通用 功能 。 


我 们 创建 了 抽象 模型 、 存 储 副 、 视 图 以 及 控制 右 ， 并 学 会 了 创建 目 定 义 代理 类 ; 同时 应 用 了 
网 格 面板 单元 格 编辑 插件 、 即 席 搜 索 插 件 以 及 网 格 面 板 过 小 插件 ; 还 学 习 了 通过 存储 表 功 能 执行 
CRUD 操 作 的 方法 ， 知 道 使 用 autosync 属 性 配置 项 时 不 加 以 小 心 就 可 能 造成 危险 后 果 。 男 外 ， 
我 们 还 学 习 了 在 控制 希 里 创建 目 定 义 事件 及 处 理 操作 列子 项 事件 的 方法 。 


接 下 来 ， 我 们 将 学 习 怎 样 实现 内 容 管理 模块 (本章 只 是 管理 单个 表 )。 我 们 将 管理 来 日 数据 
库 表 的 信息 〈 与 应 用 业务 逻辑 相关 联 )， 以 及 它们 在 数据 库 中 的 各 种 关系 。 


上 一 章 我 们 实现 了 模仿 数据 库 表 编辑 器 界面 的 静态 数据 模块 ,但 它 基本 上 还 只 能 对 单 表 进行 
CRUD 操 作 ， 并 带 点 额外 功能 。 本 章 将 进一步 了 解 管理 表 信息 的 复杂 性 。 在 实际 应 用 程序 中 ， 我 
们 管理 的 表 信 息 总 会 和 其 他 表 发 生 关 联 ， 这些 关 联 同样 需要 管理 。 这 就 是 本 章 的 内 容 : 学 习 如 何 
使 用 Ext JS 创建 界面 管理 复杂 信息 。 


本 章 主 要 包括 以 下 内 容 : 


口 用 Ext JS 管理 复杂 信息 ; 
口 处 理 多 对 多 关系 ; 
口 关联 表单 ; 


口 重用 组 件 。 
7.1 管理 影片 、 客 户 和 租借 信息 

Sakila 数 据 库 有 4 个 主要 模块 : 库存 (Inventory ) 模块 ,包含 影片 及 库存 信息 ( 每 个 商店 
可 用 于 租借 的 影片 数量 ); 客户 数据 ( customer Data ) 模块 , 包含 客户 信息 ; 业务 (Business ) 
模块 ， 包 含 商 店 、 座 员 、 租 借以 及 支付 信息 等 ( 视 库存 模块 和 客户 数据 模块 情况 而 定 ); 视图 
( Views ) 模块 ， 包含 图 表 展 示 用 到 的 数据 。 


现在 , 我 们 先 把 精力 放 在 库存 模块 、 客 户 数 据 模 块 以 及 业务 模块 上 , 这 些 模块 包含 了 应 用 的 
核心 业务 信息 。 先 来 看 看 库 行 模块 ， 这 个 模块 比 其 他 两 个 模块 拥有 更 多 的 数据 库 表 : 
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» description TEXT 
release_year YEAR 

$language_id TINYINT Pl—————— | 
original_language_i | 
rental_duration TIN 


length SMALLINT 
replacement_cost D... BF 一 
> rating ENUM....} 

special features SE... 


Movie database 


| Fim id SMALLINT 
fim_id SMALLINT category_ idTINYINT 
;title VARCHARI255) Re 


> 
2 


, 人 A -4H Y language _id TIN... 
oie 

之 | SEE 
;rental rate DECIM... | EE PA Fie 


天 
"ee 


VY inventory_id MED... 
er fiim idSMALLINT 
| $film_id SMALLINT 
stom idTINYINT 9 title VARCHARI255) 
slast_update TIME... - 


PY category_id TINY... 
yname VARCHAR.., 


> 


actor_id SMALLINT 
9 first_name VARC... 
last_name VARC... 


actor_id SMALLINT 
film_id SMALLINT 
last_update TIME... 


» 


入 = ee 


根据 saki1a 数 据 库 文档 描述 : 


i 
ijnventory ( 库存 ) 表 里 。 
film 表 参照 language (语言 ) 表 ， 同 时 ， 


被 film _ category 表 ( 景 


表 )、film actor 表 (影片 演员 映射 表 ) 以 及 inventory 表 参照 。 


film 表 Gcategory (2 
表 跟 1anguage 表 之 间 有 两 个 多 对 一 关系 。 


类 别 ) 表 、actor (演员 ) 表 之 间 都 有 一 个 多 对 多 的 关系 。 


的 管理 功能 。 现 在 ， 我 们 来 实现 film 表 与 其 他 表 间 关联 关系 的 管理 功能 。 


先 来 简单 看 一 下 本 革 要 实现 的 界面 。 虽 然 我 们 的 saki1la 数 据 库 里 有 客户 数据 模块 和 业务 模 
块 , 但 本 草 我 们 只 讨论 与 影片 相关 的 内 容 。 不 用 紧张 , 客户 数据 模块 和 业务 模块 仁 循 同样 的 方式 ， 
你 可 以 从 本 书 样 例 源 代码 中 找到 这 两 个 模块 的 相关 代码。 


首先 ， 需 要 一 个 界面 列 出 我 们 拥有 的 影 


I 加 Mastering Ext JS 


Pe 
(4) 由 localhost/masreringextjs/ 


Mastering Ext JS wr 


LE Eee 
和 KE 
Video Store Manager - Mastering Ext js a Enghshs | | Logout 
I» 全 Home | 图 Films < 

OMdd Edit 四 Delete 


Film 1d Tite Language Release Year Lenght Rating Last Update 
国 中 去 ACADEMY DINOSAUR & English 2006 86 PG 2006-02-15 05:03:42 
由 | 之 ACE GOLDFINGER English 2006 48 G 2006-02-15 05:03;42 
由 3 ADAPTATION HOLES English 2006 50 NC-17 2006-02-15 05:03:42 
田 4 AFFAIR PREJUDICE English 2006 117 G 2006-02-15 05:03:42 
由 5 AFRICAN EGG English 2006 130 G 2006-02-15 05:03:42 
由 6 AGENT TRUMAN English 2006 169 PG 2006-02-15 05:03:42 
由 7 AIRPLANE SIERRA English 2006 62 PG-13 2006-02-15 05:03:42 
因 8 AIRPORT POLLOCK English 2006 54 R 2006-02-15 05:03:42 
由 9 ALABAMA DEVIL English 2006 114 PG-13 2006-02-15 05:03:42 
由 10 ALADDIN CALENDAR English 2006 63 NC-17 2006-02-15 05:03:42 
转 川 六 ALAMO VIDEOTAPE English 2006 126 G 2006-02-15 05:03:42 


Page 1 ef50 | 则 | 襄 Displaying films 1 - 20 of 1000 


Mastering ExtJS book - Loiane Groner - http:/ /packtpub.com 


史 片 ) 表 是 商店 里 现 有 的 所 有 影片 的 列表 。 每 部 影片 实际 存货 数量 反应 在 


乡 片 类 别 映射 


同时 ,film 


在 前 一 革 ， 我 们 已 经 实现 了 类 别 表 、 演 员 表 和 语言 表 
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我 们 有 可 能 希望 在 里 面 创建 或 编辑 影片 信息 ,因此 ,在 徐 体 里 创建 表单 面板 供 信息 编辑 使 用 : 


居 AcADEMY CADEMY DINOSAUR . x 


| Trailers 加 |] Commentaries 
Deleted Scenes Behind the Scenes 


@ cancel 辐 save 


由 于 film 表 与 category 表 是 多 对 多 关系 ,因此 , 我 们 需要 在 表单 面板 提供 单独 的 标签 页 处 
理 类 别 相 关内 容 : 


Search and Add 入 ) Delete 


Category Mame Last Update 
Cocumentary 2006-02-15 05:07:093 


全 Cancel 国 Save 


我 们 还 打算 添加 更 多 的 影片 类 别 ， 因 此 ， 提 供 了 Search and Add (搜索 和 添加 ) 功能 : 


Hold Chl or Command to select more than one Category., 
Categories: 


名 cancel | a Clear Add Selected 
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同样 的 ，£ilm 表 与 actor 表 也 是 多 对 多 关系 ， 因 此 也 要 在 表单 面板 上 做 类 似 处 理 : 


Eal 


上 | EA i 


| Film Information | Film Categories | Film Actors | 
,| 请 search and Add 局 Delete ' 
引 Bectaor 天 First Name Last Name Last Update 医 
1 PENELOPE GUINESS 2006-02-15 05:05:03 
中 2 CHRISTIAN GABLE 2006-02-15 05:05:03 
| 20 LUCILLE TRACY 2006-02-15 05:05:03 | 
| 3 SANDRA PECK 2006-02-15 05:05:03 
| 40 JOHNNY CAGE 2006-02-15 05:05:03 | 
ee MENA TEMPLE 2006-02-15 05:05:03 | 
‖ it8 WARREN NOLTE 2006-02-15 05:05:03 | 
162 OPRAH KILMER 2006-02-15 05:05:03 
188 ROCK DUKAKIS 2006-02-15 05:05:03 
138 MARY KEITEL 2006-02-15 05:05:03 


| 名 Cancal Save 


如 果 我 们 想 为 影片 添加 更 多 的 演员 名 单 ， 可 以 使 用 Search and Add ( 搜索 和 添加 演员 和 名单 ) 


A 天 到 下 天 忆 一 MEA 二 EE 

1 指 Search and Add Actor Xp 
a 主攻 上 

NG 

"CHASE, ED 


| Action: CADDYSHACK JEDI, FORREST SONS; Classics: FROST HEAD, JEEPERS WEDDING; 

1 Documentary: ARMY FLINTSTONES, FRENCH HOLIDAY HALLOWEEN NUTS, HUNTER ALTER, 

1 WEDDING APOLLO, YOUNG LANGUAGE; Drama: LUCK OPUS, NECKLACE OUTBREAK, SPICE 
SORORITY; Foreign: COWBOY DOOM, WHALE BIKINI; Music: ALONE TRIP; New: EVE 

| ‘ RESURRECTION, PLATOON INSTINCT; Sci-Fi: WEEKEND PERSONAL; Sports: ARTIST COLDBLOODED, 
1 IMAGE PRINCESS; Travel: BOONDOCK BALLROOM 

1 COSTNER, FRED 

| 

| 


Action: EASY GLADIATOR, ENTRAPMENT SATISFACTION, REAR TRADING; Animation: CAROL TEXAS, 
INCH JET, MIRACLE VIRTUAL, MISSION ZOOLANDER, THEORY MERMAID; Children: EMPIRE 

' MALKOVICH; Classics: MAGNIFICENT CHITTY; Documentary: BROTHERHOOD BLANKET, 
DELIVERANCE MULHOLLAND; Drama: DECEIVER BETRAYED, SAINTS BRIDE; Family: BLANKET 
BEVERLY, EARRING INSTINCT, GABLES METROPOLIS; Foreign: IMPOSSIBLE PREJUDICE; Games: | 
HUMAN GRAFFITI; New: CLEOPATRA DEVIL, EAGLES PANKY' Sci-Fi: CONNECTICUT TRAMP, | 


AIEEERNIM mAAAIAIT men TRARAEE mITRI PE VN ARACN LAAYAIE ATE PEPAIPC NCC Tom smile 


| 
| 
| 
NW | lm Paeli | 本 2 | 这 
| 
| 
| 


外 Cancel 日 Clear 图 Add selected 


注意 , 我 们 对 每 个 界面 部 进行 了 不 同 的 方法 处 理 。 这 样 我 们 就 可 以 在 处 理 这 些 场景 的 过 程 中 
学 习 到 更 多 的 Ext JS 使 用 方法 。 


好 了 ， 现 在 我 们 对 本 革 的 实现 思路 有 了 大 体 了 解 ， 接 下 来 享受 实践 的 乐趣 吧 
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7.2 呈现 影片 数据 网 格 


首先 ,我 们 从 基本 实现 人 手 。 无 论 何 时 我 们 想 实 现 多 么 复杂 的 界面 ,都 应 简单 的 组 件 
春 于 。 我 们 要 进行 不 断 的 修改 并 添加 更 多 复杂 功能 ， 直 至 其 能 完全 运行 。 因 此， 第 一 步 我 们 需要 
创建 模型 和 存储 硕 来 表示 film 表 。 这 部 分 功能 完成 后 ， 就 实 es 
language 表 以 及 actor 表 的 关联 关系 o 


7.2.1 影片 模型 
首先 ， 我们 要 创建 表示 filim 表 的 模型 。 先 不 用 考虑 它 具 有 哪些 关联 关系 。 
我 们 来 创建 一 个 新 类 Packt .model .film.Film: 


Ext .define('Packt.model .film.Film', f{ 
extend: 'Packt.model.sakila.Sakila', 


idProperty: 'film id', 


fields: [| 
{ name: 'film id' }, 
{ name: 'title', type: 'string' }, 
{ name: 'description', type: 'string'}, 
{ name: 'release year', type: 'int'}, 
{ name: 'language id'}, 
{ name: 'original language id'}, 
{ name: 'rental duration', type: 'int'}, 
{ name: 'rental rate', type: 'float'}, 
{ name: 'length', type: 'int'}, 
{ name: 'replacement cost', type: 'float'}, 
{ name: 'rating'}, 
{ name: 'special features'} 


}); 


由 于 所 有 的 sakila 数 据 库 表 都 有 last_update 列 ， 因 此 ， 我们 扩展 自 Packt .model. 
sakila.Sakila 类 以 避免 在 每 个 创建 的 模型 (代表 某 个 saki1a 数 据 库 表 ) 中 都 声明 这 个 字段 。 


声明 的 字段 跟 file 数 据 库 表 字 段 保持 一 致 。 


7.2.2 影片 存储 器 


下 一 步 是 创建 加 载 影 片 集合 的 存储 般 。 我 们 来 创建 新 的 存储 角 Packt .store.film.Films 
(如 朱 你 想 这 循 Sencha 惯 例 ， 需 语 记 存储 如 名称 总 是 模型 名 称 的 复数 形式 ): 


Ext .define('Packt.store.film.Films', 
extend: 'Ext.data.Store', 


requires: | 
'Packt .model .film.Film', 
'Packt .proxy .Sakila' 

] ， 


model: 'Packt.model .film.Film', 
pageSize: 20, // #1 


storeId: 'films', 


proxy: { 
type: 'sakila', // #2 
url: 'php/inventory/list.php' 


}); 


在 这 个 存储 益 里 ,我 们 像 往 常 一 样 声 明了 模型 ,同时 还 声明 pagesize 属 性 值 为 20 (#1 ), 这 
意味 着 我 们 将 在 影片 数据 网 格 中 用 到 分 页 工具 栏 ， 并 一 次 获取 20 部 影片 显示 在 网 格 面 板 中 。 

注 硬 ， 我 们 将 代理 类 型 type 设 置 为 sakila， 也 就 是 说 ， 并 未 来 用 原生 的 代理 。 为 什么 需要 
一 个 目 定 义 代理 呢 ? 本 书 中 ,大 多 数 情况 下 ,我们 都 会 声明 一 个 代理 ,代理 类 型 type 通 第 为 Ajax， 
且 代 理 中 该 写 角 (reader 和 writer ) 用 到 的 设置 项 通 和 党 是 一 样 的 。 因 此 ， 为 了 避免 在 每 次 声明 
代理 时 重复 声明 同样 的 配置 项 ， 我 们 可 以 创建 自己 的 目 定 义 代 理 类 。 


记得 要 在 app/proxy 目 录 下 创建 这 个 代理 类 


Ext .define('Packt .proxy.Sakila', { 
extend: 'Ext.data.proxy.Ajax', 
alias: 'proxy.sakila', 


type: 'ajax', 


reader: { 
type: 'jJson', 
messageProperty: 'msg', 
root: 'data' 


} 了 


writer: { 
type: 'jJson', 
writeAllFields: true, 
encode: true, 
allowSingle: false, 
root: 'data' 


} 了 


listeners: { 
exception: function(proxy, response, operation)t 
Ext .MessageBox.show(t 
title: 'REMOTE EXCEPTION', 
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msg: operation.getError(), 
icon: Ext.MessageBox.ERROR, 
buttons: Ext.Msg .OK 

}); 


}); 


要 在 存储 器 中 使 用 这 个 代理 类 ， 我 们 只 需 在 requires 属 性 声明 里 添加 这 个 代理 类 ， 并 使 用 
这 个 代理 类 型 。 如 末 你 愿意 ， 可 以 按 此 思路 ， 重 构 前 面 几 章 已 创建 的 有 关 存 储 融 。 


7.2.3 ”市 分 页 功能 的 影片 数据 网 格 
我 们 现在 有 了 模型 和 存储 器 ， 接 下 来 需要 创建 影片 数据 网 格 : 


Ext .define('Packt.view.film.Films', f{ 
extend: 'Packt.view.sakila.SakilaGrid', // #1 
alias: 'widget.filmsgrid', 
requires: | 


'Ext .ux.RowExpander' // #2 
] ， 


store: 'film.Films', 


columns: | 
{ 
text: 'Film Id', 
width: 100, 
dataIndex: 'film id' 


text: 'Title', 
flex: 1, 
dataIndex: 'title' 


text: 'Language', 

width: 100, 

dataIndex: 'language id', // #3 

renderer: function(value, metaData, record ) { 


Var languagesStore = Ext.getStore('languages'); 
var lang = languagesStore.findRecord('language id', value).; 
return lang != null ? lang.get('name') : value; 
} 
}, 
{ 
text: 'Release Year', 
width: 90， 


dataIndex: 'release year' 


一 一 


text: 'Lenght', 
width: 80, 
dataIndex: 'length' 


text: 'Rating', 


width: 70, 
dataIndex: 'rating' 
} 
] ， 
dockedItems: [ 


{ 
dock: 'bottom', 
xtype: 'pagingtoolbar', // #4 
store: 'film.Films', 
displayInfo: true, 
displayMsg: 'Displaying films {0} - {1} of {2}', 
emptyMsg: "No films to display'" 


] 了 


plugins: [{ // #5 
ptype: 'rowexpander', 
rowBodyTpl : | 
'<p><b>Description:</b> {description}</p><br>', 
'<p><b>Special Features:</b> {special features}</p><br>', 
'<p><b>Rental Duration:</b> {rental duration}</p><br>', 
'<p><b>Rental Rate:</b> {rental rate}</p><br>', 


'<p><b>Replacement Cost:</b> {replacement cost}</p><br>' 


}); 


由 于 应 用 程序 慢 慢 变 大 了 , 我 们 发 现在 相同 组 件 里 大 量 使 用 了 某 些 配置 项 。 例 如， 大 多 数 的 
网 格 面板 都 使 用 了 带 有 添加 、 编 辑 和 删除 按钮 的 工具 栏 ， 所 有 的 saki1la 数 据 库 表 都 有 最 后 修改 
列 ， 因 此 ， 这 列 对 于 用 来 列 出 saki1la 数 据 库 表 信 息 的 网 格 面板 同样 适用 。 出 于 这 样 的 考虑 ， 我 
们 可 以 创建 一 个 网 格 面板 超 类 (正如 针对 静态 数据 模块 所 做 的 )。 因 此 ， 对 于 影片 网 格 面板 ,将 
扩展 自 sSakilaGrid 类 (#1， 后续 会 创建 )。 


接 下 来 ， 我 们 声明 requires 为 RowExpander(# )， 用 它 来 展示 一 些 影片 的 额外 信息 ， 这 
些 信息 由 于 太 大 而 无 法 在 列 中 展现 。 


下 一 个 重点 代码 是 language_id 列 的 renderer 演 染 训 代码 (要 )。 我 们 再 一 次 使 用 
renderez 函 数 来 呈现 存储 融 中 已 加 载 的 某 个 值 。 我 们 可 在 此 列 上 使 用 hasOne 关 联 ( 在 这 里 ， 影 
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上 刻 表 跟 语言 表 之 间 是 多 对 一 关系 ) 然而 , 这 么 做 之 前 得 多 问 目 己 一 些 问题 ; 虽然 Ext JS 提供 了 这 
种 关联 关系 , 但 存储 器 也 提供 我 们 需要 加 载 的 值 , 那么 这 种 情况 下 再 使 用 ( hasOne 关 联 ) 合 适 吗 ? 
如 条 这 人 么 做 了 ， 从 服务 硕 奖 取 回 的 JSON 啊 应 数据 怠 会 变 大 ， 并 且 其 中 的 一 些 数 据 对 其 他 模型 而 
土 就 是 重复 的 。 假 设 这 样 : 所 有 影片 的 language_id 值 是 1 ( 英 霹 语种 )， 则 同一 个 语言 模型 就 
会 被 加 载 20 次 (pagesize 的 设置 值 )。 


假设 我 们 考虑 在 影片 和 语言 模型 的 L1anguage_idq 字 段 上 使 用 HasOne 关 联 。 
这 种 情况 下 ， 因 为 这 种 关联 关系 ，ExtJS 会 自动 生成 一 个 名 为 getLanguage 的 获 
取 方 法 。 而 我 们 需要 这 么 使 用 rendqerezr 函 数 : 


dataIndex: 'language id', 
renderer: function(value, metaData, record ) ({ 
return record.getLanguage() .get ('name'); 


} 


接 下 来 是 分 页 工具 栏 (#4 )。 我 们 需要 指定 存储 右 ， 即 使 用 同 网 格 面板 一 样 的 存储 絮 。 由 于 
pageSsize 属 性 已 在 存储 益 中 设置 了 ， 因 此 这 里 就 不 需 青 重复 设 定 。 


最 后 ,设置 RowExpander 插 件 的 配置 项 (#5 )。 我 们 需要 配置 一 个 模板 使 其 呈现 一 些 额外 信 
息 。 在 这 里 ,我 们 显示 影片 介绍 以 及 其 他 一 些 不 适合 在 列 中 呈现 的 信息 ， 如 租借 信息 等 。 不 幸 的 
是 ， 无 法 与 关联 模型 一 同 使 用 RowExpander 插 件 。 

前 面 已 创建 了 影片 网 格 面板 。 现 在 来 实现 稍 早 前 提 到 的 sakilaGrigd 类 。 注 意 ， 影片 数据 网 
格 里 还 没有 带 添 加、 编辑 和 删除 按钮 的 工具 栏 ， 也 没有 最 后 修改 列 。 因 此 , 我们 即将 创建 的 网 格 
超 类 会 实现 这 些 配置 。 


由 于 我 们 在 app/view/sakila 文 件 夹 里 创建 所 有 的 视图 超 类 ， 因 此 ， 也 在 其 中 创建 一 个 名 为 
SakilaGrid.js 的 文件 ， 代 码 内 容 为 : 


Ext .define('Packt .view.sakila.SakilaGrid', { 
extend: 'Ext.grid.Panel', 
alias: 'widget.sakilagrid', 


requires: | 
:Packt .view.toolbar.AddEditDelete' // #1 
] ， 


columnLines: true, 
viewConfig: { 
stripeRows: true 


}, 


dockedItems: [| 


ww 
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~ 


xtype: 'addeditdelete' // #2 
| 


initComponent: function() { 


var me = this; 


me.columns = Ext.Array.merge (me.columns, // #3 
[{ 
xtype : 'datecolumn', 
text : 'Last Update ' ， 
width : 120, 
dataIndex: 'last update', 
format: 'Y-m-j H:i:s', 
filter: true 
}] 
); 


me.callParent (arguments).; 

人 

上 述 代码 中 ， 有 很 重要 的 两 点 需要 关注 。 第 一 是 AqdEditDelete 工 具 栏 (# 检 和 #2 )。 只 要 愿 
意 , 我 们 可 以 创建 一 个 类 专门 声明 这 个 工具 栏 。 这 样 的 话 , 如 有 果 想 在 其 他 组 件 中 使 用 同一 工具 栏 ， 
就 可 以 重用 代码 。 男 外 ， 有 了 通用 的 工具 栏 ， 我 们 就 创建 了 一 个 样板 ,并且 便于 后 续 创 建 控 制 带 
(监听 视图 的 触发 事件 )。 第 二 是 我 们 声明 了 最 后 修改 列 (#3 ) 上 一 章 实现 静态 数据 模块 时 ， 我 
们 用 了 同样 的 方法 。 

截至 当前 ， 我 们 还 没 创建 AqdqEditDelete 工 具 栏 ， 那么 现在 就 来 创建 它 。 要 创建 它 ， 需 先 
在 app/View 目 录 中 创建 一 个 名 为 toolbar 的 子 目录 ， 我 们 将 在 其 中 创建 应 用 程序 的 所 有 工具 栏 : 


Ext .define('Packt.view.toolbar.AddEditDelete', f{ 
extend: 'Ext.toolbar.Toolbar', 
alias: 'widget.addeditdelete', 


flex: 1, 

dock: 'top', 

items: [| 

C 

xtype: 'button', 
text: 'Add', 
itemId: 'add', 
lconCls: 'add' 


xtype: 'lbutton', 
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text: 'Edit', 
ijtemId: 'edit', 


iconCls: 'edit' 
上 
{ 
xtype: 'button', 
text: 'Delete', 
itemId: 'delete', 
ljconCls: 'delete' 
} 


}); 


工具 栏 位 于 组 件 停 驻 项 的 项 部 。 如 果 我 们 要 改变 它 ， 只 需 在 AqdEditDelete 类 里 修改 dock 
属性 配置 项 即 可 。 


请 注意 ,我 们 使 用 的 代码 与 前 面相 关 类 中 的 一 样 。 我 们 可 以 从 有 关 类 声明 中 移 除 这 些 代码 ， 
并 创建 一 个 新 的 自 定义 组 件 以 重用 代码 。 如 果 你 想 这 么 做 ， 那 就 去 重 构 前 面 的 相关 类 。 别 忘 了 在 
redquired 声 明 中 添加 类 名 ，, 否则 ExtJS 动 态 加 载 引 苟 将 不 知道 我 们 想 要 实例 化 哪个 类 ( 如 果 它 尚 
未 在 内 存 中 加 载 )。 


1. 处 理 服务 器 靖 分 页 


由 于 我 们 使 用 了 分 页 工具 栏 ， 因 此 有 必要 记 住 几 个 概念 。Ext JS 提供 工具 帮助 我 们 进行 内 容 
分 页 ， 但 需要 强调 的 是 ， 如 有 朱 一 次 性 获取 了 数据 库 表 的 所 有 记录 ，Ext JS 的 分 页 功能 将 失效 。 看 
一 下 Ext JS 发 至 服务 融 问 的 请 求 ， 会 发 现 使 用 分 页 工具 栏 时 传递 了 3 个 额外 参数 。 


这 三 个 参数 是 start Limit 和 page。 例 如 ,如 我 们 所 见 , 第 一 次 加 载 网 格 面板 信息 时 ,start 
为 0，1imit 为 存储 器 里 设置 的 pagesize 值 (这 里 是 20 )，page 为 1: 


CSS Script DOM | Net ~ 


| Clear Persist : All HTML C55 J5 XHR Images Flash Media 


URL ‘Status Domain Size Remotelp Timeline 


i) Net panel activated. Any reguests While the net panel is inactive are meat shown. 


WCETIstphp? 2000K localhost BKB [:1]:80 
Params Headers Response Cache HTML JSON Coeokies 
-dc ] 3 右 ] 和 站] 全 起 急 BD 
limit 20 


page 
start 


1request 


我 们 点 击 网 格 面板 的 下 一 页 时 ，start 变 为 20，1imit 仍 为 20( 这 个 数 总 是 20， 除 非 我 们 动 
态 更 改 pageSize 设 置 值 )，page 变 为 2: 


HIML Css Seript DOM | Netv | Coa. 


: Clear Persist : All HTML Css Js XHR Images Flash Media 


Status ga 3 Bape le. Timeline 


wr = le 


bb GET list.php? 200 OK localhost 8 KB [::1]:80 
GET listphpr C200 OK localhost Ba.2 KB [::1]:80 国 8ms 


Params Headers Response Cache HTML JSON Cookies 


34613 人 201 总 B32 
直上 0 


://github.com/loiane/extJjs4-ux-paging-toolbar-resizer。 


| KY 根据 用 户 需 要 ， 已 有 第 三 方 插件 可 以 动态 更 改 pageSize 设 置 值 . 
https 


这 些 参数 同样 有 助 我 们 对 数据 库 信 息 进行 分 页 。 例 如 ， 对 于 MySQL， 我 们 只 需要 start 和 
1imit， 因 此 ， 可 以 从 请 求 中 获取 它们 : 


SS 七 at 

Slimit 

之 后 ， 执 行 SELECT 查 询 语句 ， 我 们 需要 在 最 后 添加 LIMIT $start，s$limit ( 如果 存在 
WHERE、ORDER BY 和 GROUP BY 等 子 句 ， 就 在 这 些 字 人 名 之 后 ): 


$s_REQUEST['start']; 
$_REQUEST['limit']; 


Ssql = "SELECT * FROM Film LIMIT S$start, Slimit"; 


这 样 就 能 够 从 数据 库 中 获取 我 们 需要 的 信息 。 另 一 个 很 重要 的 细节 是 分 页 工具 栏 呈 现 数据 库 
表 记 录 的 总 数值 : 


Ssql = "SELECT count (*) as num FROM Film"; 


因此 我 们 需要 在 JSON 格 式 数据 中 添加 返回 数据 库 表 记录 计数 的 total 属性 : 


echo json encode (array ( 
"success" => S$Smysqli->connect_ errno == 
"data" => Sresult, 
"total" => Stotal 

) ); 


之 后 ，Ext JS 就 会 取 回 所 有 需要 的 信息 并 正确 分 页 。 
2. MySQL、Oracle 与 Microsoft SQL Server 上 的 分 页 查询 
如 果 使 用 不 同 数据 库 产品 就 需要 多 加 小 心 ， 因 为 对 数据 库 信息 进行 分 页 的 查询 语句 是 不 同 的 。 
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如 果 使 用 Oracle 数 据 库 ， 诗 分 页 功能 的 SELECT 查询 语句 就 是 这 样 : 


SELECT * FROM 
(select rownum as rn, f.* from 
(select * from Film order by film id) as f 
) WHERE rn > Sstart and rn <= ($start + S$l1imit) 


这 可 比 MySQL 的 实现 复杂 多 了 。 现 在 我 们 来 看 看 Microsoft SQL Server( 2012 之 前 版 本 ) 的 
查询 语句 : 


SELECT * 
FROM ( SELECT ROW NUMBER() OVER ( ORDER BY film id ) AS RowNum, * 
FROM Films 
) AS RowConstrainedResult 
WHERE RowNum > $start 
AND RowNum <= (Sstart + Slimit) 
ORDER BY RowNum 


SQL Server 2012 的 查询 语句 会 简单 点 : 


SELECT * FROM Film 

ORDER BY film id 

OFFSET Sstart ROWS 

FETCH NEXT Slimit ROWS ONLY 


Firebird 数 据 库 的 的 查询 语句 甚至 比 MySQL 还 简单 : 
SELECT FIRST Slimit SKIP Ssstart * FROM Film 


此 ， 如 果 你 使 用 的 不 是 MySQL 数 据 库 ， 一 定 要 注意 不 同 的 SQL 实 现 语 法 。 


7.2.4 创建 控制 器 
现在 我 们 已 实现 了 影片 网 格 面板 。 按 照 既 定 的 方案 ， 接 下 来 要 实现 控制 器 Packt 


controller.film.Films: 


Ext .define('Packt.controller.cms.Films', { 
extend: 'Ext.app.Controller', 


requires: [ // #1 
'Packt .util .MD5', 
'Packt .util.Alert', 
'Packt .view.MyViewport', 
'Packt .util .Util' 

J 


views: [| 
'film.Films' 


] 了 


stores: | 


ww 
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'film.Films' 


] 了 


init: function(application) { 
this.controll(t 
"filmsgrid": { 
render: this.render // #2 
} 
}); 
}, 


render: function(component, options) { 
component .getStore().1oad(); // #3 
} 
人 
以 上 束 是 我 们 初步 实现 的 控制 硕 ， 能 够 监听 影片 网 格 面板 触发 的 rendezr 事 件 ( 霹 )。 影 户 网 
格 面板 泻 染 展示 时 , ExtJS 将 加 载 存 储 器 ( 妈 ), 通常 情况 下 , 我 们 希望 Ext JS 加 载 前 面 创建 的 Util 
工具 类 (#1 )。 


7.3 影片 网 格 面板 编辑 功能 
现在 ， 影 片 网 格 面板 已 经 可 以 呈现 和 加 载 了 ， 接 下 来 我 们 实现 添加 和 编辑 功能 。 


如 我 们 本 章 开 头 看 到 的 界面 截图 ，Edit ( 编辑 ) 窗 体 有 三 个 标签 页 : 第 一 个 用 来 编辑 影片 详 
细 信 息 , 第 二 个 用 来 编辑 与 影片 有 关 的 类 别 信息 , 第 三 个 用 来 编辑 与 影片 有 关 的 演员 信息 。 现在 ， 
先 来 实现 影片 详细 信息 编辑 功能 。 


在 app/view/film 文 件 夹 中 创建 新 的 视图 类 Packt .view.film.FilmWindow。 这 个 类 是 一 个 
窗 体 ,包含 一 个 以 标签 面板 为 子 项 的 表单 。 我 们 会 在 其 中 一 个 标签 面板 内 添加 表单 字段 ， 用 来 编 
辑 影 刻 详 细 信 息 。 


Ext .define('Packt.view.film.FilmWindow', { 
extend: 'Packt.view.sakila.WindowForm', // #1 
alias: 'widget.filmwindow', 
requires: | 


"PackE. util. UtiL' 77 $2 
] ， 


width: 537, 
title: 'Edit Film', 
jconCls: 'film add', 


items: [ 
{ 
xtype: 'form', 
autoScroll: true, 
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layout: { 
type: 'fit' 
}y 
items: | 
t 
xtype: 'tabpanel', 
activeTab: 0, 
items: I[ 
{ 
xtype: 'panel', 
autoScroll: true, 
bodyPadding: 10, 


layout: { 
type: 'anchor' 
}, 
title: 'Film Information', 
defaults: { 
anchor: '100%', 
msgTarget: 'side' 
}, 
items: [ // #3 


/ /影片 具体 字段 

] 
)， 
// 影 片 类 别 标 签 面 板 
// 影 片 演员 标签 面板 


} 
}); 
现在 我 们 有 了 基本 配置 。 很 重要 的 一 点 是 : Filmwindow 类 扩展 和 目 Packt.view.sakila. 
WindowForm (#1 )， 而 Packt.view.sakila.WindowForm 类 扩展 自 Ext JS 窗 体 类 ( Ext. 
window.Window ) 并 带 有 Save 和 Cancel 按 钮 。 再 次 的 ,我们 试 着 创建 一 个 超 类 ， 以 便 尽 可 能 重用 
更 多 代码 。 我 们 将 在 下 一 市 实现 这 个 类 ，。 


requires 里 声明 Uti1l 类 是 为 了 在 所 有 必 填 字段 里 使 用 红星 标识 “*”( # 检 )。 现 在 ， 在 第 一 
个 标签 面板 上 (#3 ) 放置 表示 影片 数据 库 表 每 列 的 表单 字段 。 


我 们 看 一 下 sakila 文 档 里 关于 影 片 表 字段 的 描述 ( http://dev.mysql.com/doc/sakila/en/ 
sakila-structure-tables-film.html )。 


口 film ia 表 的 主键 ， 具 有 唯一 值 。 因 此 我 们 可 以 用 隐藏 字段 控制 它 。 

Dtitle 影 族 标 题 。 因 此 我 们 可 以 用 文本 字段 表示 它 。 由 于 这 个 值 的 最 大 长 度 是 255 字 符 ， 
所 以 我 们 也 需要 加 上 相关 的 验证 。 

D description 一 段 影 上 的 简短 描述 或 情 世 摘要 。 由 于 摘 述 最 大 长 度 是 5000 宇 符 ， 因 此 
可 以 用 多 行文 本 字段 表示 它 。 
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D release_year 影片 发 行 年 份 。 可 以 用 数值 字段 表示 ， 从 最 小 值 1950 到 当前 年 份 加 1 
( 比如 说 我 们 想 添加 下 一 年 发 行 的 有 影 厂 )。 

DD language_iqd 指 回 语言 表 的 外 键 ， 标 识 影片 语言 。 可 以 用 语言 存储 融 驱 动 的 组 合 框 表 
示 ( 应 用 程序 加 载 时 就 填充 好 了 选项 值 )。 

DD original language id 指 回 语言 表 的 外 键 ， 标 识 影片 的 原 产 语言 ， 用 于 翻译 片 。 
这 个 字段 同样 能 够 用 语言 存储 天 驱动 的 组 合 框 表 示 〈 同样 的 ， 应 用 加 载 时 就 填充 好 了 
选项 信 )。 

口 rental duration 租借 周期 的 长 度 ， 以 天 为 单位 。 可 以 用 数值 字段 表示 ， 最 小 值 为 1， 
最 大 值 为 10( 限制 最 大 值 )。 

口 rental_ rate 在 rental_duration 列 的 周期 内 ,租借 影片 的 费用 。 用 数值 字段 表示 ， 
值 范围 从 0 到 5， 人 允许 小 数位 。 

口 length 影 斤 播放 时 长 ， 以 分 钟 为 单位 。 用 数值 字段 表示 ， 信 范围 从 1 到 999。 

口 replacement_cost 影片 未 归还 或 归还 时 有 损坏 的 情况 下 客户 的 赔偿 金 。 用 数值 字段 
表示 ， 数 值 犯 围 从 0 到 100。 

D rating 影片 的 评级 。 可 以 是 以 下 某 一 值 : G、PG、PG-13、R 或 NC-17。 由 于 是 固定 值 ， 
可 以 用 单 选 按 钮 或 组 合 框 表示 ， 这 里 我 们 使 用 组 合 框 。 

口 special features 列 出 DVD 包含 的 常见 特性 。 可 以 是 0 个 或 多 个 特性 ， 如 : 预告 片 、 
评论 、 删 减 内 容 或 帮 后 花 祭 等 。 由 于 可 选 特 性 为 0 个 或 多 个 ， 因 此 可 以 用 复 选 按钮 或 多 选 
组 合 框 表示 。 这 里 我 们 使 用 复 选 按钮 。 


我 们 首先 声明 的 前 3 个 字段 是 film _iqd、title 和 release year: 


{ 
xtype: 'hiddenfield', 
name: 'film id' 


xtype: 'textfield', 

name: 'title', 

fieldLabel: 'Title', 

afterLabelTextTpl: Packt.util.Util.required, 
allowBlank: false, 

maxLength: 255 


xtype: 'numberfield', 


name: 'release year', 
fieldLabel: 'Release Year', 
maxValue: (new Date () .getFullYear()) + 1, 


minValue: 1950, 
allowDecimals: false 


} 
目前 没什么 特别 之 处 ， 接 下 来 是 语言 字段 : 
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xtype: 'combobox', 

name: 'language id', 

fieldLabel: 'Language', 

displayField: 'name', 

valueField: 'language id', 

queryMode: 'local', 

store: 'staticData.Languages', 
afterLabelTextTpl: Packt.util.Util.required, 
allowBlank: false 


xtype: 'combobox', 

name: 'original language id', 
fieldLabel: 'Original Language', 
displayField: 'name', 
valueField: 'language id', 
queryMode: 'local', 

store: 'staticData.Languages' 


} 

注意 , 我 们 为 这 两 个 字段 使 用 了 同一 个 存储 着 ; 我 们 希望 它们 有 同样 的 值 , 这 意味 着 当 用 户 
在 静态 数据 模块 的 声言 网 格 面板 添加 或 改变 语言 时 , 我 们 硕 望 变化 能 够 同时 反映 在 对 应 存储 大 上 
(并 且 这 里 的 两 个 字段 也 能 保持 最 新 状态 ) 所 以 , 这 里 使 用 的 存储 融 跟 静 态 数 据 模 块 使 用 的 是 同 


-个 


O 


数值 字段 有 rental_duration、 rental rate、 length 科 replacement_ cost: BE 
7 


{ 
xtype: 'numberfield', 
name: 'rental duration', 
fieldLabel: 'Rental Duration', 
maxValue: 10, 
minValue: 1, 
allowDecimals: false, 
afterLabelTextTpl: Packt.util.Util.required, 
allowBlank: false 


xtype: 'numberfield', 

name: 'rental_ rate', 

fieldLabel: 'Rental Rate', 

maxValue: 5, 

minValue: 0, 

step: 0.1, 

afterLabelTextTpl: Packt.util.Util.required, 
allowBlank: false 


xtype: 'numberfield', 
name: 'length', 
fieldLabel: 'Lenght (min)', 


999 ， 
minValue: 1 


maxValue: 


'numberfield', 

name: 'replacement cost', 
fieldLabel: 'Replacement Cost', 
100 ， 
minValue: 0, 

step: 0.1, 
afterLabelTextTpl: 


xtype: 


maxValue: 


} 


Packt .util.Util.required 


有 一 点 很 重要 , 只 要 是 数值 字段 并 且 我 们 想 要 从 模型 中 加 载 它们 , 就 再 要 模型 中 对 应 的 字段 
同样 是 数值 型 ( int 或 f10at ， 整 型 或 浮 点 型 )， 人 否则 ， 表 单 就 不 会 加 载 这 些 值 。 


rating 组 合 框 及 其 存储 右 声 明 如 下 : 


{ 

xtype: 'combobox', 
name: 'rating', 
fieldLabel: 'Rating', 
displayField: 'text', 
'text', 
'local', 


valueField: 
queryMode: 
store: 'film.Ratings' 


} 


评级 的 值 是 固定 的 。 因 此 ， 我 们 可 以 创建 一 个 带 有 预 设 值 且 扩 展 自 Arraystore 的 存储 器 


Packt .store.film.Ratings: 


Ext .define('Packt.store.film.Ratings', 


extend: 'Ext.data.ArrayStore', 
fields: | 
{name: 'text'}, 
] ， 
data : [ // ENUM('G','PG','PG-13' 
['G'], 
['PG'], 
['PG-13'], 
['R'], 
['NC-17'] 
] ， 
autoLoad: true 


二 


,'R','NC-17') 


这 是 我 们 所 能 创建 的 用 以 填充 组 合 框 的 最 


复 选 按钮 组 代码 如 下 : 


简单 的 存储 冀 。 继续 往 下 ， special features 
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xtype: 


7.3 


'Ccheckboxgroup', 


fieldLabel: 'Special Features', 
columns: 2, 


nAame.: 


items: 


lL 


} 


复 选 按钮 组 是 表单 中 填充 起 来 最 复杂 的 字段 。 每 个 复 选 按钮 字段 的 行为 都 像 一 个 独立 的 字 
段 , 因此， 每 个 复 选 按钮 都 需要 有 自己 的 名 称 和 输入 值 。 我 们 将 在 开始 实现 控制 器 时 介绍 如 何 填 


宛 它 。 


'special_ features', 


[ 


xtype: 'checkboxfield', 
boxLabel: 'Trailers', 
inputValue: 'Trailers', 
name: 'trailers' 


xtype: 'checkboxfield', 
boxLabel: 'Commentaries', 
inputValue: 'Commentaries', 
name: 'commentaries' 


xtype: 'checkboxfield', 
boxLabel: 'Deleted Scenes', 
inputValue: 'Deleted Scenes', 
name: 'deleted' 


xtype: 'checkboxfield', 
boxLabel: 'Behind the Scenes', 
inputValue: 'Behind the Scenes', 
name: 'behind' 


最 后 ，description 字 上 段 是 一 个 多 行文 本 字段: 


{ 


xtype: 


nAame.: 


'textareafield', 
'description', 


fieldLabel: 'Description', 
maxLength: 5000 


71.3.1 


Packt .view. sakila .WindowForm 


Edit Film (影片 编辑 ) 窗 体 模块 最 后 需要 完成 的 代码 段 是 WindowForm 超 类 。 截 至 日 前 ,我 
们 实现 的 所 有 窗 体 都 采用 Fit 布 局 ， 并 且 一 般 里 面 都 有 一 个 表单 面板 。 同 时 ， 窗 体 分 别 有 一 个 
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Cancel 和 Save 按 钮 。 由 于 这 些 配 置 是 窗 体 的 默认 通用 配置 , 因此 我 们 可 以 考虑 创建 一 个 窗 体 超 类 : 


Ext .define('Packt.view.sakila.WindowForm', 
extend: 'Ext.window.Window', 
alias: 'widget .windowform', 
requires: | 


:Packt .view.toolbar.CancelSave'! 


] 了 


height: 400, 
width: 550, 
autoScroll: true, 
layout: { 

type: 'fit' 
}, 


modal: true, 


// 子 类 中 必须 履 盖 的 项 


dockedItems: [| 
{ 
xtype: 'cancelsave'! 
} 
] 
}); 
我 们 可 以 按 类 似 思 路 对 Cancel Save Toolbar ( 取消 保存 工具 栏 ) 做 同样 处 理 . 
Ext .define('Packt.view.toolbar.CancelSave', { 
extend: 'Ext.toolbar.Toolbar', 
alias: 'widget.cancelsave', 
flex: 1, 
dock: 'bottom', 
ui: 'footer', 
layout: { 
pack: 'end', 


type: 'hbox' 
}, 


items: I[ 
{ 
xtype: 'lbutton', 
text: 'Cancel', 
itemId: 'cancel', 
liconCls: 'cancel' 


xtype: 'lbutton', 


text: 'Save', 
itemId: 'save', 
ijconCls: 'save'! 
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我 们 又 一 次 游 才 有 余地 重 构 了 我 们 已 实现 的 代码 。 这 就 是 ExtJS 和 MVC 架 构 带 来 的 好 处 : 允 
许 你 重用 代码 ,并 且 如 同 在 其 他 面向 对 象 语言 里 可 以 做 的 那样 ， 你 可 以 重 构 这 些 代 码 ， 而 且 实 现 
起 来 并 不 难 。 


7.3.2 影片 类 别 


前 面 我 们 已 经 介绍 了 影 族 的 详细 资料 , 接 下 来 我 们 处 理 最 复杂 的 部 分 : film 表 与 category 
表 和 actor 表 的 关联 关系 。category 表 和 actor 表 都 跟 film 表 有 一 个 多 对 多 的 关系 。 在 开始 对 
关联 关系 进行 编码 之 前 , 我 们 需要 再 次 思考 一 下 : 是 否 真 的 需要 一 个 关联 关系 ?” 值得 吗 ? 这 些 天 
联 关 系 是 否 会 造成 服务 病 端 与 Ext JS 客户 冰 之 间 的 数据 交换 发 生 数 据 过 载 现象 呢 ? 


看 看 数据 库 ， 就 会 发 现 每 部 影片 只 有 一 个 类 别 ， 尽 管 存 在 多 对 多 关系 。 即 使 Ext JS 具备 管理 
关联 关系 的 能 力 , 我 们 也 不 打算 马上 使 用 它 。 因 为 我 们 希望 只 在 用 户 打 开 编 辑 窗 体 浏览 影片 信息 
时 才 加 载 关 联 信息 ， 即 按 需 加 载 关 联 数 据 。 

但 是 ， 如 果真 要 建立 关联 ， 那 我 们 怎样 在 Ext JS 里 处 理 一 个 多 对 多 关系 呢 ? Ext JS 并 没有 提 
供 原生 支持 o 你 可 以 在 film 表 与 fi lm_category 表 之 间 建立 一 个 名 为 FilmCategory 的 Has 
Many 关 联 ( 这 里 是 一 对 多 关联 关系 )， 然 后 在 Filmcategory 跟 category 表 间 建 立 Has One 关 联 
(这 里 是 多 对 一 关联 关系 )。 

1. Store 


由 于 我 们 只 打算 显示 与 某 部 具体 影片 天 联 的 类 别 ， 因 此 可 以 重用 category 模 型 但 需要 创 
建 一 个 新 的 存储 天: 


Ext .define('Packt.store.film.FilmCategories', { 
extend: 'Ext.data.Store', 


requires: | 
'Packt .model.staticData.Category', 
'Packt .proxy.Sakila' 

], 


model: 'Packt.model.staticData.Category', 


proxy: { 
type: 'sakila', 


api: { 
create: 'php/inventory/film category_ create.php', 
read: 'php/inventory/film category.php', 
update: 'php/inventory/film category update.php', 
destroy: 'php/inventory/film category_destroy .php' 
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我 们 将 通过 这 个 存储 融 执 行 Eilm_category 数 据 库 表 上 的 CRUD 操 作 。 但 现在 我 们 首先 关 
注 readq 动 作 。 


我 们 的 思路 是 传递 感 兴 趣 的 film_id 到 categorie 表 ， 人 然后 将 其 发 送 到 服务 磊 端 。 通 过 以 
下 查询 语句 可 从 categorie 表 里 获取 我 们 需要 的 信息 : 


SELECT c.category_ id, c.name, f.last update FROM category c 
INNER JOIN film category f ON f.category id= c.category id 
WHERE f.film id= Sfilm id 


这 样 我 们 就 不 需要 使 用 关联 关系 ， 并 且 可 以 只 通过 一 条 SELECT 语句 获取 我 们 需要 的 信息 。 


2. 编辑 视图 
下 一 步 是 实现 Edit Film ( 影片 编辑 ) 窗 体 上 网 格 面板 显示 影片 类 别 功 能 


Ext .define('Packt .view.film.FilmCategories', { 
extend: 'Packt.view.sakila.SakilaGrid', 
alias: 'widget.filmcategories', 
requires: | 


:Packt .view.toolbar.SearchAddDelete' 
] ， 


store: 'film.FilmCategories', 


columns: | 
{ 
text: 'Category Id', 
width: 100, 
dataIndex: 'category_id' 


text: 'Category Name', 
flex: 1, 
dataIndex: 'name' 


] 了 


dockedItems: [ 


{ 
xtype: 'searchadddelete' // #1 


} 


})3; 


这 是 一 个 简单 的 网 格 面板 ， 跟 之 前 创建 的 网 格 面板 很 相似 , 但 其 工具 栏 (#1 ) 上 的 按钮 是 搜 
索 、 添 加 、 删 除 等 ， 而 非 庄 加、 编辑 和 删除 。 这 又 是 一 个 可 以 说 明 我 们 能 够 上 覆 与 超 类 配置 
(Sakilacrid ， 初 始 配置 中 已 有 了 一 个 市 添加 、 编 辑 、 删 除 按钮 的 工具 栏 ) 的 好 例子 。 如 果 不 
履 写 超 类 配置 项 ， 那 么 就 将 使 用 sakilacriq 类 中 原来 声明 的 属性 配置 项 。 由 于 我 们 覆 写 了 
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dockedItem 配 置 项 ， 所 以 这 里 将 使 用 子 类 中 声 明 的 配置 项 。 
3. 带 搜索 、 添 加 、 删 除 按钮 的 工具 栏 


这 个 目 定 义工 具 栏 组 件 于 我 们 而 言 是 全 新 的 ， 之 前 从 未 遇 到 。 由 于 Actor (演员 ) 界面 也 使 
用 Search ( 搜索)、Add 和 Delete (删除) 按钮 ， 因 此 ， 我 们 专门 创建 一 个 工具 栏 组件 类 : 


EXxt .define('Packt.view.toolbar.SearchAddDelete', { 
extend: 'Ext.toolbar.Toolbar', 


alias: 'widget.searchadddelete', 
flex: 1, 

dock: 'top', 

items: [ 


{ 
xtype: 'button', 
text: 'Search and Add', 
itemId: 'add', 
iconCls: 'find' 


xtype: 'button', 
text: 'Delete', 
ijtemId: 'delete', 


iconCls: 'delete' 
} 
] 
这 是 一 个 融 有 两 个 按钮 的 简单 工具 栏 ， 跟 我 们 之 前 实现 的 工具 栏 很 相似 ， 如 下 图 所 示 : 


| Film Information | Film Categories 


4. 搜索 类 别 一 一 Multiselect 组 件 


用 户 点 击 Search and Add (搜索 和 添加 ) 按钮 时 ， 将 呈现 一 个 新 窗 体 ， 其 中 包含 一 个 
MultiSelect (多 选 ) 组 件 ， 用 户 可 以 选择 1 个 或 多 个 类 别 添加 到 影片 类 别 中 : 


Ext.dqefline('Packt.view.ftlilm.SearchCategqory '  ，{ 
extend: 'Packt.view.sakila.SearchWindow', 
alias: 'widget.searchcategory', 
requires: | 


'Ext .ux.form.MultiSelect' 


] ， 


title: 'Add Category', 


xtype: 'form', 
ijtemId: 'filmForm', 
autoScroll: true, 
bodyPadding: 10, 
items: I[ 
{ 
xtype: 'label', // #1 


text: 'Hold Ctrl or Command to select more than one Category.' 
}, 
{ 
anchor: '100%', 
xtype: 'multiselect', // #2 
msgTarget: 'side', 
fieldLabel: 'Categories', 
name: 'multiselect', 
allowBlank: false, 
store: 'staticData.Categories', // #3 
valueField: 'category_ id', // #4 
displayField: 'name', /4 #5 
ddReorder: true // #6 


] 
}); 


我 们 有 一 个 表单 ， 表 单 面板 上 有 两 个 子 项 : 第 一 个 (机 ) 是 标签 项 ， 通 知 用 户 按 下 Ctrl 或 
Command 键 选择 多 个 类 别 ; 第 二 个 是 Multiselect 字 上 段 (可 )， 这 个 字段 并 非 是 Ext JS 原生 目 市 
的 ， 它 位 于 示例 日 录 下 的 ux 文件 夹 中 ， 因 此 ， 我 们 将 在 requires 属 性 配置 里 添加 该 类 的 声明 。 


MultiSelect 组 件 与 组 合 框 组 件 很 相似 ,你 也 需要 设置 一 个 存储 佛 (#3 ) valueField( #4) 
以 及 displayField (#5 )。 不 同 点 在 于 信息 呈现 给 用 户 的 方式 。 区 别 于 下 拉 列 表 ， 它 是 一 个 带 
有 多 选 值 的 面板 。 


为 了 更 有 趣 一 些 ， 我 们 将 实现 拖 放 重 排 ， 用 户 可 以 通过 拖 放 来 对 值 进行 重新 排序 (大 )。 


Db. Packt .view.sakila.SearchWindow 


由 于 searchCategory 类 扩展 自 SearchWindow， 因此 需要 创建 SearchWindow 类 。 这 同样 
是 一 个 初次 遇 到 的 新 组 件 。 如 果 后 面 我 们 还 需要 创建 Search and Add 窗 体 ， 那 么 就 可 以 扩展 自 这 


个 类 : 


EXt .define('Packt.view.sakila.SearchWindow', { 
extend: 'Ext .window.Window', 
alias: 'widget.searchWindow', 
requires: | 


'Packt .view.toolbar.CancelClearAdd' 


了 水 学 
我 们 发 现 ， 它 跟 编辑 窗 体 很 相似 ,不 同 点 在 于 我 们 使 用 了 带 有 Cancel、Clear ( 清除 ) 和 Add 


7.3 


] ， 


height: 300, 
width: 400, 
autoScroll: true, 
layout: { 
type: 'fit' 
}, 
iconCls: 'find', 
modal: true, 


// 子 类 必须 履 盖 的 项 


dockedItems: [| 
{ 
xtype: 'cancelclearadd' 


J 


按钮 的 工具 栏 ， 而 非 取 消 和 保存 按钮 。 


珊 有 Cancel、Clear 和 Add 按 钮 的 工具 栏 同 样 非常 简单 〈 跟 我 们 目前 已 实现 的 工具 栏 没什么 


区 别 ): 


Ext .define('Packt.view.toolbar.CancelClearAdd', f{ 


extend: 'Ext.toolbar.Toolbar', 
alias: 'widget.cancelclearadd', 
flex: 1, 
dock: 'bottom', 
ui: 'footer', 
layout: { 
pack: 'end', 
type: 'hbox' 
}, 
items: | 
{ 
xtype: 'button', 
text: 'Cancel', 
itemId: 'cancel', 
liconCls: 'cancel' 
}, 
{ 
xtype: 'button', 
text: 'Clear', 
itemId: 'clear', 
iconCls: 'clear' 
}, 
{ 
xtype: 'button', 
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text: 'Add Selected', 
ijtemId: 'save', 
jconCls: 'save' 


] 
j 


后 续 ， 我 们 将 在 控制 融 中 处 理 这 些 按钮 触发 的 所 有 事件 。 


7.3.3 演员 信息 

actor 表 与 film 表 的 关联 关系 , 类 似 于 category 表 与 tilm 表 的 关系 , 也 是 一 个 多 对 多 的 关 
系 。 我 们 按照 处 理 影片 表 和 类 别 表 关 系 的 思路 来 处 理 演员 表 与 影片 表 的 多 对 多 关联 关系 。 

1. 存储 器 

我 们 可 以 再 次 重用 Actor 模 型 ， 只 需 简单 地 创建 一 个 新 的 存储 器 来 处 理 关 联 关系 : 


Ext .define('Packt.store.film.FilmActors', f 
extend: 'Ext.data.Store', 


requires: | 
'Packt.model .staticData.Actor', 
'Packt .proxy .Sakila' 

] ， 


model: 'Packt.model.staticData.Actor', 


proxy: { 
type: 'sakila', 


api: { 
create: 'php/inventory/film actor create.php', 
read: 'php/inventory/film actor.php', 
update: 'php/inventory/film actor_ create.php', 
destroy: 'php/inventory/film actor delete.php' 


}); 


在 服务 器 端 ， 我 们 将 像 处 理 Eilm_category 表 那样 : 发送 film _ id 到 服务 上 帮 端 ， 人 然后 从 
actor 表 中 取 回 我 们 感 兴 趣 的 信息 : 

SELECT c.actor id, c.first name, c.last name, f.last update 

FROM actor c 


INNER JOIN film actor f ON f.actor id= c.actor id 
WHERE f.film id= Sfilm id 


我 们 保存 一 部 影片 的 编辑 内 容 时 ，film_actor 表 将 被 修改 或 者 添加 新 记录 。 
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2. 编辑 视图 


与 处 理 film_categoxrvy 表 的 思路 类 似 : 我 们 也 需要 一 个 网 格 面板 显示 演员 症 岂 5 再 一 次 扩 
展 sakilaGrigd 类 并 显示 演员 表 的 相关 列 : AGtOr 1d Firest NamelLlKiast Name ( 最 后 修改 
列 也 会 被 显示 ， 因 为 已 经 在 sakilacriaq 类 里 实现 了 它 ): 


Ext .define('Packt.view.film.FilmActors', f 


extend: 'Packt.view.sakila.SakilaGrid', 
alias: 'widget.filmactors', 
requires: | 


:Packt .view.toolbar.SearchAddDelete' 
] ， 


store: 'film.FilmActors', 
columns: | 


{ 
text: 'Actor Id', 


width: 100, 
datalIndex: 'actor_ id' 
}, 
€ 
text: 'First Name', 
flex: 1, 
dataIndex: 'first name' 
}, 
{ 
text: 'Last Name', 
width: 200, 
dataIndex: 'last name' 
} 
| 
dockedItems: [| 


{ 
xtype: 'searchadddelete' 
} 
直达 


这 个 网 格 面板 上 有 Search and Add ( 搜索 和 添加 )、Delete( 删除 ) 按钮 。 


2. 搜索 演员 索 组 合 框 


即席 搜索 组 合 框 的 思路 是 呈现 搜索 界面 以 及 一 个 组 合 框 字段 给 用 户 ， 用 户 可 以 输入 搜索 条 
件 , 之 后 系统 进行 即席 搜索 并 显示 匹配 用 户 搜索 条 件 的 演员 信息 以 及 演员 参 演 的 影片 信息 。 所 有 
与 搜索 条 件 相 匹配 的 演员 都 将 作为 组 合 框 的 选择 项 显示 出 来 , 并 且 组 合 框 可 分 页 展示 。 用 户 选择 
演员 时 ,我 们 将 显示 演员 的 姓 和 名 。 这 是 个 非 第 棱 的 组 件 ， 也 比 其 他 的 组 件 更 复杂 ,我 们 将 为 组 
合 框 应 用 一 些 高 级 配置 。 
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4. 模型 


首先 ， 需 要 一 个 模型 来 呈现 从 服务 融 问 获取 的 信息 。 我 们 将 获取 演员 及 其 参 演 影片 的 信息 。 


因此 ， 可 以 创建 一 个 扩展 自 Actor 模 型 的 searchActor 模 型 ， 在 其 中 内 


Ext .define('Packt.model.film.SearchActor', f 
extend: 'Packt.model .staticData.Actor', 


fields: |[ 
{ name: 'film info' } 
] 
省 才学 


5. 存储 器 
接 下 来 我 们 需要 实现 一 个 存储 入， 用 来 加 和 载 SearchActor 模 型 集 : 


Ext .define('Packt.store.film.SearchActors', f 
extend: 'Ext.data.Store', 


requires: | 
Packt .model .film.SearchActor' 
] ， 


model: 'Packt.model.film.SearchActor', 
pageSize: 2, 


proxy: { 
type: 'ajax', 
url: 'php/inventory/searchActors.php', 
reader: { 
type: 'json', 
root: 'data' 


}); 


在 服务 磊 端 ， 我 们 将 通过 actor_info 数 据 库 视图 获取 信息 。 男 外 ， 


14 需 声 明 缺 失 的 字段 即 可 : 


组 合 框 也 传递 了 三 个 额 


外 的 参数 : 用 于 分 页 的 start 和 1imit 人 参数 , 以 及 一 个 包含 用 户 所 输 搜 索 条 件 、 名 为 query 的 参数 。 


因此 ， 我 们 的 SELECT 查 询 语句 如 下 : 


Sstart = S$ REQUEST['start']; 
Slimit Ss REQUEST['l1imit']; 
Squery = S$_REQUEST['query'l]; 


/ /查询 并 获取 信息 


Ssql = "SELECT * FROM actor_ info " 
Ssql .= "WHERE first name LIKE '%" . Squery . "%' OR " 
Ssql .= "last name LIKE '%" . Squery . "%' "; 


Ssql .= "LIMIT Sstart, S$limit",; 
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当 我 们 实现 分 页 功能 时 ， 别 忘 了 统计 一 下 共有 多 少 条 匹配 搜索 条 件 的 记录 ， 并 通过 JSON 格 
式 数 据 的 total 属 性 返回 给 客户 端 : 


Ssql = "SELECT count(*) as num FROM actor info " 
Ssql .= "WHERE first name LIKE '%" . Squery . "%' OR "; 
Ssql .= "last name LIKE '%" . Squery . "%' 2 


现在 ， 我 们 就 可 以 根据 用 户 输 入 的 搜索 条 件 获取 数据 库 信息 了 
6. 即席 搜索 组 合 框 


接 下 来 ， 我 们 要 实现 提供 搜索 功能 的 视图 。 因此 ， 创建 一 个 扩展 自 sSearchWindow 的 类 ， 其 
中 包含 一 个 组 合 框 ， 它 能 提供 即席 搜索 的 所 有 功能 。 


Ext .define('Packt .view.film.SearchActor', { 
extend: 'Packt.view.sakila.SearchWindow', 
alias: 'widget.searchactor', 
width: 600, 
bodyPadding: 10, 
layout: { 

type: 'anchor' 


) 
title: 'Search and Add Actor ' ， 


items: [| 
{ 
/ /组 合 框 // #1 
} ,1 


xtype: 'component', 
style: 'margin-top:10px', 
html: 'Live search requires a minimum of 2 characters.' 


}); 


搜索 框 克 部 有 一 个 用 户 提示 : 至 少 输入 两 个 字符 才能 进行 即席 搜索 。 如 下 图 所 示 : 


五 FE lL BT 


Wh Soarch and Add ACtor 六 


Live seareh reguires a minimum of 2 characters. 


全 Cancel sdClear Add Selected 


现在 ， 我 们 来 实现 上 述 代码 中 #1 位 置 的 组 合 框 功能 


158 第 7 章 ”内容 管 理 


xtype: 'combo', 

store: 'film.SearchActors', // #1 
displayField: 'first name', // #2 
valueField: 'actor_ id', // #3 
typeAhead: false, 

hideLabel: true, 


hideTrigger:true, // #4 
anchor: '100%', 
minChars: 2, // #5 
pageSize: 2, // #6 
displayTpl: new Ext.XTemp1late ( // #7 
'<tpl for=".">' + 
'{[typeof values === "string" ? values : values["last name"]]}, ' + 
'{[typeof values === "string" ? values : values["first name"]]}' + 
'</tpl>' 
) ， 
listConfig: { // #8 
loadingText: 'Searching...', 


emptyText: 'No matching posts found.', 


// 为 每 个 选项 自 定 义演 米 模板 
getInnerTpl: function() { // #9 
return '<h3><span>{last name}, {first name}</span></h3></br>' + 
' {film info}' 


} 


同样 的 ， 我们 需要 一 个 存储 器 ( #1， 前 面 已 经 实现 了 它 ) 用 来 填充 组 合 杠 。 然 后 ,我 们 需 
一 个 displayField 属 性 配置 项 (# )。 当 即席 搜索 选中 一 个 演员 时 ， a 
演员 表 的 fijrst_name 字 上 段 值 。 然而 ， on bE 够 显示 last_name 和 first_name 两 个 字段 值 。 
因此 ， 为 了 达成 这 个 目的 ， 我 们 需要 履 与 QisplayTp1 模 板 〈 故 ) 效果 如 下 图 所 未: 


二 一 la i 甬 癌 过 Eo— 


站 省 Search amd Add Actor we 
E 本 
CHASE, ED| [ 
Live search reguires a minimurm of 2 characters. | 
r 


Bcancel | a dlear | 图 Mdd Selected 


接 下 来 ， 设置 valueField 属 性 配置 项 (#2 ) 为 所 选 演员 的 i1d; 通过 设置 hideTrigger 属 
be 隐藏 下 拉 箭 头 ( 堆 ) 即席 搜索 操作 至 少 需 要 用 户 输入 两 个 字符 才能 工作 (# ); 组 合 框 
每 页 只 显示 两 个 演员 (#6 )。 


~ 
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然后 ， 设 置 1istconfig 属 性 配置 项 (#8 )， 我 们 可 以 在 这 里 配置 加 载 提 示 信 息 、 无 值 提 示 
言 息 以 及 显示 演员 信息 的 模板 等 。 一 般 情 况 下 ,显示 演员 信息 时 ,开头 加 粗 显 示 演 员 的 1ast_name 
和 first_name 信 息 ， 下 一 行 显示 演员 参 演 的 所 有 影片 。 


7.4 影片 控制 器 


通过 前 面 几 章 学 习 , 我 们 掌握 了 数据 保存 的 实现 方法 : 表单 提交 、Ajax 请 求 以 及 通过 存储 器 
写 入 。 本 市 我 们 将 只 聚焦 尚未 实现 的 功能 。 但 不 用 担心 ,完整 实现 的 源 代 码 部 能 在 本 书 的 对 应 草 
找到 。 


7.4.1 在 编辑 表单 中 加 载 已 有 影片 信息 


我 们 已 经 党 试 过 通过 1oadRecord 方 法 加 载 表 单 面 板 〈 在 第 5$ 草 )。 现 在 来 试 试 万 一 种 方法 : 
setValues 方 法 。 因 为 我 们 有 个 checkBox ( 复 选 按钮 ) 组 ， 在 表单 面板 上 加 载 它 的 值 还 是 有 点 
复杂 的 ， 但 这 个 方法 比较 适合 当前 情形 。 当 用 户 从 影片 网 格 面板 中 选择 了 一 条 记录 并 点 击 Edit 按 
钮 时 ， 将 打开 编辑 窗 体 并 加 载 记 录 值 。 基 于 上 述 思 路 ， 我 们 需要 监听 Edit 按 钮 的 click 事 件 并 实 
现 一 个 以 button (按钮 ) 为 参数 的 方法 : 


Var grid= button.up('filmsgrid'), 
record = grid.getSelectionModel() .getSelection().; 


if(record[01){ // #1 
Var editWindow = Ext.create('Packt.view.film.FilmWindow'): 
Var form = editWindow.down('form'); 


var values = { // #2 
film id: record[0] .get('film id'), 
title: record[0] .get('title'), 
description: record[0] .get('description'), 
release year: record[0|] .get('release year'),, 
language id: record[0] .get('language 1id'), 
original language id: record[0] .get('original language id'), 
rental duration: record[0] .get('rental duration'), 
rental rate: record[l0] .get('rental rate'), 
length: record[0] .get('length'), 
replacement cost: record[0] .get('replacement cost'), 
rating: record[0] .get('rating') 


Ext .each (record[0] .get('special features') .split(','), function(feat){ // #3 
if (feat === 'Trailers') { 
values.trailers = 'Trailers'; 
} else if (feat === 'Commentaries') { 
values.commentaries = 'Commentaries'; 
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} else if (feat === 'Deleted Scenes') { 
values.deleted = 'Deleted Scenes ' ; 
} else if (feat === 'Behind the Scenes') { 
values.behind = 'Behind the Scenes ' ; 
} 
}); 
Var filmCategories = editWindow.down('form filmcategories');} 


filmCategories.getStore().loadl(t // #4 
params: { 
filmIid: record[0] .get('film id') 
} 
}); 


Var filmActors = editWindow.down('form filmactors'); 
filmActors.getStore().loadl(t // #5 
params: { 
filmIid: record[0] .get('film id') 
} 
}); 


form.getForm() .setValues (values); // #6 


editWindow.setTitle(record[0] .get('title')); 
editWindow.setIconCls('film edit'); // #7 
editWindow.show(); 


} 


首先 ， 如 果 用 户 从 网 格 面板 选择 了 一 条 记录 《〈 芍 )， 我 们 将 创建 编辑 窗 体 ， 获 取 表 单 面板 引 
用 ， 取 出 记录 值 ( 妃 ) 其 中 ， 如 末 在 模型 中 该 字段 未 设置 正确 类 型 ， 就 需要 做 转换 〈 数值 字 段 
只 能 接受 数字 ， 无 法 接受 字符 驯 ) 


但 上 述 代 码 还 缺少 special features 字 段 ， 数据 库 表 中 该 字段 值 是 用 到 号 分 割 的 文本 信 
县 ， 我 们 需要 获取 每 个 分 割 值 (#3 )。 每 个 复 选 按钮 看 起 来 都 像 一 个 个 独立 字段 ， 因 此 ， 我 们 需 
要 给 每 个 需要 设置 的 复 选 按钮 字段 设置 输入 值 。 


接 下 来 ， 我 们 获取 film_id 字 上 段 值 并 加 载 FilmCategories ( 夫 ) 和 FilmActors (#5) 存 
储 硕 ， 但 只 能 获取 film_ id 字段 值 对 应 影片 的 关联 信息 。 


当 一 切 准 备 就 绪 后 , 我 们 调用 setvalues 方 法 , 并 传人 前 面 创建 的 SON 对 和 象 (#6 ), 该 JSON 
对 象 包 次 了 所 有 需 设 置 的 表单 字段 的 值 。 


接 下 来 ， 我 们 动态 设置 窗 体 的 ritle 和 Icon 属性 值 (如 )， 并 把 窗 体 呈现 给 用 户 。 


7.4.2” 锋 取 Multiselect 组 件 值 


一 旦 用 户 选 择 了 选 定 影片 关联 的 正确 类 别 , 束 可 以 反击 保存 按钮 。 这 时 我 们 需要 人 处理 按钮 的 
点 击 事件 ， 处 理 逻 辑 如 下 : 
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Var searchWindow = button.up('searchcategory');} 


Var values = searchWindow.down('multiselect') .getValue(); 
Var store = Ext.getStore('categories'); 
Var filmCategoriesStore = this.getFilmCategories() .getStore(); 


Ext .each (values, function(value)t 
Var model = store.findRecord('category_ id', value); 


if (model)t 
model.set('last update', new Date()); 
filmCategoriesStore.add (model); 


}); 


searchWindow.close(); 


首先 获取 searchcategory 的 引用 ， 然 后 定位 到 multiselect 字 段 并 获取 值 。 由 于 
multiselect 字 段 只 返回 所 选项 对 应 的 ia( 即 获取 到 的 值 是 ia )， 因 此 ， 接 着 需要 获取 
categories 存 储 融 的 引用 ， 后 续 用 来 查找 并 获取 idq 对 应 的 类 别 。 最 后 ， 我 们 同样 需要 获取 
Filmcategories 存 储 需 的 引用 ， 用 以 添加 ia 对 应 的 类 别 。 


接 下 来 ,我 们 在 categories 存 储 人 名 中 对 每 个 值 都 进行 查找 ， 如 果 找 到 了 对 应 模型 ， 就 添加 
该 模型 到 Filmcategories 存 储 兹 中 ， ee 


但 是 ， 要 想 正常 工作 ， 还 需要 this.getFilmCategories 方 法 运行 起 来 。 我 们 创建 一 个 
Filmcategories 网 格 面板 引用 来 解决 这 个 问题 : 


{ 


ref: 'filmCategories', 
selector: 'filmcategories' 


7.4.3 ”通过 即席 搜索 狭 取 所 选 演员 


要 获取 即席 搜索 的 演员 的 详细 信息 , 我 们 可 以 采取 处 理 影 片 分 类 时 所 用 的 方式 。 由 于 用 到 了 
不 同 组 件 ， 所 以 ， 相 应 的 实现 也 就 有 所 不 同 : 


Var searchWindow = putton.up('searchactor ' ) ; 


Var Value = searchWindow.down('combo') .getValue(); 
Var Store = Ext.getStore('actors'); 
var model = store.findRecord('actor id', value); 


if (model)t 
model.set('last update', new Date()); 
this.getFilmActors() .getStore() .add (model); 
} 


searchWindow.close(); 
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自 完 获取 searchActor 的 引用 ， 然 后 定位 到 组 合 框 字 段 并 获取 所 选 值 。 由 于 组 合 框 字 段 只 
返回 所 选项 对 应 的 ia ( 即 获 取 到 的 值 是 ia )， 因 此 ， 接 春 需 要 获取 Actors 存 储 囊 的 引用 ， 用 来 
查找 演员 对 应 的 模型 。 最 后 ， 我 们 同样 需要 获取 Filmactors 存 储 融 的 引用 ， 用 以 添加 对 应 的 
模型 。 


然后 ， 搜 索 Actors 存 储 锅 ， 如 果 找 到 对 应 的 模型 ， 我 们 就 将 其 添加 到 Filmactors 存 储 亲 
中 ， 对 应 的 模型 将 在 FilmActors 网 格 面 板 中 显示 。 


同样 的 ， 要 想 正常 工作 ， 还 需要 this.getFilmActors 方 法 运行 起 来 ， 我 们 创建 一 个 
filmActors 网 格 面板 引用 来 解决 这 个 问题 . 


{ 


ref: ' filmActors', 
selector: ' filmactors,' 
} 
7.5 小结 


本 草 我 们 了 解 了 怎样 实现 一 个 更 复杂 的 界面 , 用 来 管理 数据 库 表 中 的 库存 信息 。 同 时 , 我们 
学 习 了 两 种 处 理 多 对 多 关联 的 方式 。 

我 们 还 学 习 了 Multiselect 组 件 的 使 用 方法 ， 以 及 如 何 通 过 表单 和 组 合 框 组 件 完 成 即席 搜 
索 功 能 。 


下 一 章 我 们 将 学 习 如 何在 已 开发 的 界面 中 添加 一 些 非 原 生 Ext JS API 提 供 的 额外 功能 ， 如 对 
网 格 面板 内 容 进 行 打印 、 导 出 Excel 或 PDF 格式 等 。 我 们 还 将 学 习 如 何 实现 图 表 功 能 ,并 将 其 导出 
为 图 片 和 PDF 格式 。 


添加 额外 功能 


我 们 应 用 程序 的 开发 已 经 到 了 收尾 阶段 ， 而 且 Ext JS 提供 了 强大 的 功能 ， 但 仍 有 一 些 功能 需 
要 借助 其 他 技术 自己 编码 实现 。 虽 说 现在 已 经 实现 了 一 个 具备 分 页 、 排 序 以 及 过 滤 功 能 的 网 格 面 
板 ， 但 有 时 候 用 户 还 是 希望 应 用 程序 能 够 提供 更 多 的 功能 。 比 如 浴 加 打印 、 导 出 Excel， 以 及 将 
图 表 导 出 成 图 乒 和 PDF 等 功能 ， 这 可 以 为 应 用 程序 增色 并 让 最 终 用 户 满意 。 


因此 ， 本 章 主 要 包括 以 下 内 容 : 


口 打印 网 格 面板 上 的 记录 ; 

口 将 网 格 面板 信息 导出 成 PDF 和 Excel 格 式 ; 
口 图 表 功 能 ; 

口 图 表 导 出 成 PDF 和 图 片 格式 ; 

口 使 用 第 三 方 插件 。 


8.1 将 网 格 面板 信息 导出 成 PDF 和 Excel 格式 


我 们 要 实现 的 第 一 个 功能 是 把 网 格 面板 上 的 内 容 导 出 成 PDF 和 Excel 格 式 。 我 们 先 为 在 上 一 
章 实现 的 Films (影片 ) 网 格 面板 增加 这 个 功能 。 然 而 ， 对 于 其 他 任何 ExtJS 应 用 程序 中 的 网 格 面 
板 ， 实 现 此 功能 的 逻辑 思路 都 是 一 样 的 。 

我 们 要 做 的 第 一 件 事 就 是 在 网 格 面板 工具 栏 上 添加 导出 按钮 。 我 们 将 添加 3 个 按钮 : 一 个 是 
Print (打印 ) 网 格 面板 内 容 (后续 会 开发 这 个 功能 , 但 现在 先 添 加 它 )， 一 个 是 Exportto PDF ( 导 
出 成 PDF )， 上 再 一 个 是 Export to Excel ( 导出 成 Excel )。 


| 入 Home | 图 Fiims | 


号 add EEdt 局 pelete 地 Pt BB Exportto POF 国 ] Export to Excel 


Film 1d Titlie Language Release Year Lenght 
| 围 : 1 ACADEMY DINOSAUR English ab 26 


还 记得 上 一 章 我 们 为 网 格 面板 创建 了 一 个 AddEditDelete 工 具 栏 吗 ? 我们 准备 在 它 上 面 添 
加 这 3 个 按钮 : 
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Ext .define('Packt.view.toolbar.AddEditDelete', f{ 
extend: 'Ext.toolbar.Toolbar', 
alias: 'widget.addeditdelete', 


items: I[ 

// 添加 、 编 辑 和 删除 按 锂 

{ 
xtype: 'tlbseparator' 

}, 

{ 
xtype: 'lbutton', 
text: 'Print', 
itemId: 'print', 
liconCls: 'print' 


xtype: 'lbutton', 

text: 'Export to PDF', 
itemId: 'pdf', 
liconCls: 'pdf' 


xtype: 'lbutton', 
text: 'Export to Excel', 
itemId: 'excel', 
iconCls: 'excel' 


了 


别 走 了 为 每 个 按钮 深 加 itemId 属 性 ， 以 便 我 们 可 以 在 和 后 实现 的 控制 途 里 监 昕 到 特定 按钮 
触发 的 事件 。 如果 你 尚未 重 构 代码 并 添加 这 个 工具 栏 到 每 个 网 格 面 板 中 , 那 请 记得 为 每 个 网 格 面 
板 浴 加 上 这 些 功能 。 


我 们 添加 了 3 个 按钮 到 工具 栏 ， 这 也 是 重 构 代 码 并 更 改 类 名 和 别名 的 一 个 机 会 。 当 然 ， 如 果 
我 们 要 这 么 做 ， 需 记得 更 改 所 有 3 引用 AddEditDelete 类 的 代码 。 


8.1.1 导出 成 PDF 格 式 
现在 按钮 已 经 显示 在 影片 网 格 面板 上 了 ， 我 们 需要 回 到 影片 控制 希 ， 并 添加 这 些 功 能 
我 们 首先 要 监听 Export to PDF 按钮 点 击 事件 。 用 户 点 击 这 个 按钮 时 ， 将 执行 下 面 代码 : 


onButtonClickPDF: function(button, e, options) { 


Var malnPanel = Ext.ComponentOQOuery.query('mainpanel')[0];//#1 


newTab = mainpPpanel.add({ // #2 
xtype: 'panel', 
closable: true, 
iconCls: 'pdf', 
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title: 'Films PDF', 
layout: 'fit', 
items: [{ 
xtype: 'uxiframe', // #3 
src: 'php/pdf/exportFilmspdf .php' // #4 


}); 


mainpanel .setActiveTab (newTab).; 


} 


我 们 想 实 现 的 是 当 用 户 点 击 Export to PDF 按钮 时 , 打开 一 个 新 的 标签 页 , 里 面 呈 现 PDF 文 件 。 
意味 者 我 们 需要 获取 应 用 系统 视 见 区 中 央 主 面板 项 (#1 )， 并 在 其 中 添加 一 个 标签 页 〈( 埠 ); 由 
es 可 考虑 实现 一 个 iFrame。 要 在 Ext JS 中 实现 一 个 iFrame， 可 以 使 用 随 SDK 发 
布 的 IFrame 搬 件 ( 妈 ， 在 examples/ux 目 录 下 )。 由 于 我 们 已 经 在 app en 
Extux 的 映 风 ， 因此 ， 只 需 简 单 地 在 requires 声 明 里 请 求 这 个 插件 就 行 了 。 这 样 ， 当 我 们 加 载 控 
制 器 时 ， 这 个 插件 将 被 加 载 ， 当 Ext JS 尝 试用 它 的 xtype ( 码 ) 进 和 插件 就 已 被 加 载 了 : 
| 


// 这 里 放 其 他 声明 


'Ext .ux. IFrame' 


] 


下 面 到 了 最 重要 的 部 分 : Ext JS 并 未 提供 原生 的 导出 成 PDF 格 式 的 功能 。 如 果 我 们 想 在 应 
程序 里 实现 这 个 功能 ， 就 需要 使 用 不 同 的 技术 。 在 这 里 ，PDF 文 件 将 在 服务 带 端 生 成 〈 替 )， 
iFrame 里 显示 。 


执行 上 面 代码 ， 将 得 到 以 下 输出 : 


TE ee re rr rr 
ACADEMY DINOSAUR English 2006-02-15 05:03:42 
ACE GOLDFINGER English 48 3 ens 4.99 2006-02-15 05:03:42 
ADAPTATION HOLES English 50 - 7 days 2.99 2006-02-15 05:03:42 
AFFAIR PREJUDICE English 117 5 days 2.99 2006-02-15 05:03:42 
AFRICAN EGG English 130 6 days 2.99 2006-02-15 05:03:42 
AGENT TRUMAN English 169 3 days 2.9%9 2006-02-15 05:03:42 
AlIRPLANE SIERRA English - 6 days 4.99 2006-02-15 05:03:42 


BY mh 


AIRPORT POLLOCK English 6 days 4.99 2006-02-15 05:03:42 
ALABAMA DEVIL English 3days 2.99 2006-02-15 05:03:42 
ALADDIN CALENDAR English 5 days 4.99 2006-02-15 05:03:42 
ALAMO VIDEOTAPE English 6 days 0.99 2006-02-15 05:03:42 
ALASKA PHANTOM English 6 days 0.%9 2006-02-15 05:03:42 
ALI FOREVER English 4 days 4.99 2006-02-15 05:03:42 
ALICE FANTASIA English 6 days 0.99 2006-02-15 05:03:42 
ALIEN CENTER English 5 days 2.99 2006-02-15 05:03:42 
ALLEY EVOLUTION English - 6 days 2.99 2006-02-15 05:03:42 
ALONE TRIP English 3 days 0.% 2006-02-15 05:03:42 
ALTER VICTORY English ~ 6 days 0.99 2006-02-15 05:03:42 


AMADEUS HOLY English 6 days 0.99 2006-02-15 05:03:42 
AMELIE HELLFIGHTERS English 4 days 4.99 2006-02-15 05:03:42 
AMERICAN CIRCUS English 3 days 4.99 2006-02-15 05:03:42 


AMISTAD MIDSUMMER English 6 days 2.99 2006-02-15 05:03:42 
ANACONDA CONFESSIONS English 3 days 0.99 2006-02-15 05:03:42 
ANALYZE HOOSIERS English 6 days 239 2006-02-15 05:03:42 
ANGELS LIFE English 3days 2.99 2006-02-15 05:03:42 
ANNIE IDENTITY English 3days 0.99 2006-02-15 05:03:42 
ANONYMOUS HUMAN English 7 days 0.99 2006-02-15 05:03:42 
ANTHEM LUKE English 5 days 4.99 2006-02-15 05:03:42 
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在 服务 器 端 生 成 PDF 文 件 (PHP 实现 ) 


由 于 我 们 需要 在 服务 硕 问 生成 PDF 文件 , 所 以 可 以 考虑 采用 一 些 服务 右 问 语言 对 应 的 框架 或 
类 库 来 实现 这 个 功能 。 我 们 选择 TCPDF 类 ( http://www.tcpdf.org/ ) 在 PHP 中 生成 PDF 文 件 。 还 有 
其 他 相似 的 类 库 同样 适用 ， 你 可 以 选择 你 最 底 悉 的 一 种 。 


> 如 果 你 使 用 Java， 可 以 选择 iText ( http://itextpdf.com/ )， 如 果 使 用 .NET， 则 
可 以 选择 iTextSharp ( http://itextpdf.com/ )。 


8.1.2 ”导出 成 Excel 格 式 

要 把 网 格 面板 信息 导出 到 Excel 文 件 , 同样 需要 通过 服务 硕 问 技术 来 实现 。 我 们 使 用 PHPExcel 
类 库 来 完成 该 功能 ( http://phpexcel.codeplex.com/ )。 

在 Ext JS 端 ， 我 们 唯一 要 做 的 工作 就 是 调用 生成 Excel 文 件 的 处 理 链 接 : 


onButtonClickExcel: function(button, e, options) { 
window.open('php/pdf/exportFilmsExcel .php'); 


} 
> 如 果 你 使 用 Java， 可 以 选择 Apache 的 POI 库 (http://poi.apache.org/ )， 如 果 使 
el 用 .NET， 则 可 以 选择 ExcelLibrary (https://code.google.com/p/excellibrary/ )。 


如 果 你 希望 将 其 他 网 格 面 板 的 信息 导出 成 Excel、PDF、Text 以 及 Word 文 件 ， 可 以 采取 同样 
的 方法 。 


8.2 ”通过 网 格 打 印 插 件 打印 网 格 面板 内 容 

接 下 来 要 实现 的 功能 是 打印 网 格 面板 的 内 容 。 当 用 户 点 击 Print ( 打印 ) 按钮 时 ,应 用 程序 将 
打开 一 个 新 的 浏览 窗 体 并 在 其 中 显示 网 格 内 容 。 

为 完成 这 个 功能 ,我们 将 使 用 一 个 名 为 Bxt.ux.gria.Printer 的 插件 ， 该 插件 接受 竺 
打印 网 格 面板 的 引用 ， 获 取 存 储 器 中 的 信息 ， 生 成 打印 内 容 的 HTML 格 式 ， 之 后 在 新 窗 体 中 
显示 。 
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网 格 打 印 插 件 是 个 第 三 方 插件 ， 可 通过 https:/github. ee 
A gridprinter 下 载 。 ae 打印 网 格 面板 存储 器 提供 的 可 用 信息 ， 也 就 是 说 ， 
SN 如 果 你 使 用 了 分 页 工具 栏 ,该 插件 就 只 生成 当前 页 信息 的 HTML 内 容 。 该 插件 也 
提供 了 行 扩 展 插件 功能 。 还 请 随时 为 该 插件 〈 或 其 他 ExtJS 插 件 ) 做 些 免费 的 贡 
献 ， 这 样 可 以 更 好 地 帮助 Ext JS 社区 发 展 。 


装 完 该 插件 后 ( 从 ux 日 录 中 获取 副本 并 放 至 masteringextjs/extjs/ux 日 录 下 )， 我 们 只 需 在 
Films 控 制 硕 的 requires 声 明 里 添加 该 插件 请 求 即 可 : 


requires: | 
// 这 里 放 其 他 声明 
'Ext .ux.grid.Printer' 


] 
当 用 户 点 击 Print 按 钮 时 ， 欣 制 锅 将 执行 以 下 方法 : 


onButtonClickPrint: function(button, e, options) { 
Ext .ux.grid.Printer.printAutomatically = false; 


Ext .ux.grid.Printer.print (button.up('filmsgrid')); 
} 


printAutomatically 属 性 控制 是 否 自动 显示 打印 窗 体 。 如 果 设 为 false， 该 插件 将 不 会 
显示 打印 窗 体 ， 接 下 来 ， 如 果 用 户 想 要 打印 ,需要 在 浏览 菜单 里 选择 Print ( CtrltP )。 


要 让 插件 正常 工作 ,我 们 需要 传递 网 格 面 板 的 引用 给 print 方 法 ,在 这 里 ,可 以 用 putton .up 
方法 获取 影片 网 格 面 板 的 引用 。 


当 我 们 执行 代码 时 ， 将 得 到 以 下 输出 结 宋 : 


及 Print X Close 


Film Id Title Language Release Year Lenght Rating Last Update 
1 ACADEMY DINOSAUR English 2006 86 PG 02/15/2006 
Description: A Epic Drama of a Feminist And a Mad Scientist who must Battle a Teacher in The Canadian Rockies 
Special Features: Deleted Scenes,Behind the Scenes 

Rental Duration: 6 

Rental Rate: 0.99 


Replacement Cost: 20.99 


2 ACE GOLDFINGER English 2006 48 G 02/15/2006 
Description: A Astounding Epistle of a Database Administrator And a Explorer who must Find a Car in Ancient China 
Special Features: Trailers,Deleted Scenes 

Rental Duration: 3 

Rental Rate: 4.99 


Replacement Cost: 12.99 


3 ADAPTATION HOLES English 2006 50 NC-17 02/15/2006 
Description: A Astounding Reflection of a Lumberjack And a Car who must Sink a Lumberjack in A Baloon Factory 
Special Features: Trailers,Deleted Scenes 

Rental Duration: 7 

Rental Rate: 2.99 


Replacement Cost: 18.99 


4 AFFAIR PREJUDICE English 2006 
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8.3 ”创建 影片 类 别 销售 图 


Ext JS 提供 了 一 整套 可 供 使 用 的 可 视 化 图 表 ， 这 可 是 令 用 户 高 兴 的 事 。 我 们 接 下 来 实现 三 种 
不 同 的 图 表 类 型 ( 饼 图 、 柱 状 图 和 条 形 图 ), 用 户 可 以 通过 它 看 到 不 同类 别 影 刻 的 销售 情况 (Sales 
by Film Category )。 


下 图 是 本 节 完 成 后 的 最 终结 果 的 截图 。 从 图 中 可 看 出 ， 我 们 有 个 图 表 ， 其 上 有 个 工具 栏 ， 工 
具 栏 上 有 两 个 按钮 : Change Chart Type (更改 图 表 类 型 ) 按钮 ， 用 户 可 以 更 改 图 表 类 型 ( 在 饼 图 、 
柱状 图 或 条 形 图 间 转 换 ); Download Chart (下载 图 表 ) 按钮 , 用 户 能 够 以 图 片 、SVG 或 PDF 格式 下 
戟 图 表 。 


Video Store Manager - Mastering ExtJjs 

《<j 僵 Home | 艳 Sales by Film Category = 

十 | (2 Change Chart Type * 量 Download Chart > 
+ 加 Sports 
国 Sci-Fi 


本 | 团 Animation 


= | | : | 国 Drama 


几 Comedy 
国 Action 
国 New 

团 Games 
国 Foreign 
男 Family 
团 Documentary 
国 Horror 
丽 Children 
赂 Classics 
力 Travel 
加 Music 
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以 下 部 分 组 成 一 个 图 表 : store 提供 数据 ;series 表示 我 们 希望 创建 的 图 表 类 型 ( 饼 图 、 
柱状 图 、 条 形 图 ， 等 等 ); axis 为 坐标 轴 属 性 ， 如 果 图 表 是 一 个 基于 直角 坐标 系 (也 叫 稍 卡 儿 坐 
标 系 ) 的 图 表 ， 那 么 它 就 有 7 轴 和 7 镍 。 


不 管 是 创建 饼 图 、 柱 状 图 还 是 条 形 图 , 我 们 都 需要 一 个 存储 需 提 供 网 表 中 展现 的 信息 。 因 此 ， 
先 来 创建 一 个 新 的 存储 器 SalesFilmCategory: 


Ext .define('Packt.store.reports.SalesFilmCategory', { 
extend: 'Ext.data.Store', 


requires: | 
'Packt .proxy .Sakila' 
| 
fields: [ // #1 
{name: 'category'}, 
{name: 'total sales'} 


autoLoad: true, 


proxy: { 
type: 'sakila', // #2 
url: 'php/reports/salesFilmCategory .php' 


}); 

对 于 这 个 存储 器 ， 我 们 并 未 声明 对 应 的 模型 ， 而 是 直接 在 存储 器 里 声明 了 所 需 字 段 (#1 )。 
由 于 这 个 存储 需 是 图 表 专 用 的 , 因此 没 必 要 专门 为 其 创建 一 个 特定 模型 ， 而 且 我 们 也 没 打算 在 后 
面 重 用 这 个 模型 。 

我 们 可 以 重用 saki1la 代 理 配 置 项 ( # ) 因为 我 们 仍 和 需要 从 服务 冀 问 返回 同样 的 数据 结构 ( 信 
居 集 包 疙 在 这 个 数据 结构 里 )。 


在 服务 硕 端 ， 我 们 可 以 通过 Saki 1a 数 据 库 视 图 sales by_f1i lm_category 伸 询 图 表 数 据 : 


— 


SELECT * FROM sales by_film category 


8.3.1 饼 图 
现在 我 们 能 够 获取 需要 的 信息 了 ， 接 下 来 要 实现 图 表 。 我 们 先 来 开发 一 个 饼 图 : 


Ext .define('Packt .view.reports.SalesFilmCategoryPie', { 
extend: 'Ext.chart.Chart', 
alias: 'widget.salesfilmcategorypie', 


animate: true, 
store: 'reports.SalesFilmCategory', // #1 
shadow: true, 
legend: { 
position: 'right' // #2 
}, 
insetPadding: 60, 
theme: 'Base:gradients', 
series: [{ 
type: 'pie', // #3 
field: 'total sales', // #4 
showInLegend: true, // #5 


tips: { 
trackMouse: true, // #6 
width: 140, 
height: 28, 
renderer: function(storeIlitem, item) { 
this.setTitle(storeItem.get('category') + ': + 


storeItem.get('total sales')); 
} 
}, 
highlight: { 
segment: { 
margin: 20 


} 
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人 
label: { 
field: 'category', // #7 
display: 'rotate', 
contrast: true, 
font: '18px Arial' 
} 
}] 
}); 


我 们 先 来 分 析 上 述 代 码 中 最 重要 的 部 分 : 首先 , 需要 把 刚才 实现 的 存储 融 跟 岗 表 绑 定 在 一 起 
(#1 )。 接着， 添加 1egend 属 性 ; 在 本 项 目 中 ,我们 希望 图 例 显 示 在 图 表 右 边 (# )。 


接 下 来 是 series 属 性 配置 项 ， 用 以 定义 图 表 类 型 (#2 )， 本 项 目 里 是 饼 图 。 人 饼 图 需要 一 个 字 
段 用 来 计算 (各 部 分 的 ) 总 和 , 之 后 计算 每 部 分 的 比例 ; 我 们 只 有 两 个 字段 ( salesFilmCategory 
存储 硕 中 )，total_sales 字 段 ( 府 ) 是 一 个 数值 型 ， 因 此 将 使 用 这 个 字段 。showInLegend 配 
置 项 用 来 控制 是 否 在 图 例 中 添加 元 又 (#5 )。 

我 们 在 tips 属 性 配置 项 里 定义 是 否 显示 快速 提示 信息 。 在 这 里 , 我 们 希望 Ext JS 跟踪 鼠 标 运 
动 轨迹 (#6 )， 鼠 标 经 过 图 表 的 各 部 分 时 ，Ext JS 会 显示 category 宁 上 段 名 称 及 total_sales 数 值 
的 提示 信息 。 

最 后 , 将 label 属 性 配置 项 设 为 category 字 上段 (#7 )， 用 来 表示 人 饼 图 的 各 个 部 分 (在 图 表 以 
及 图 例 中 )。 


8.3.2 ”柱状 图 
由 于 可 以 更 改 图 表 类 型 ， 因 此 我 们 也 可 以 实现 一 个 如 下 图 所 示 的 柱状 图 : 


| 全 Home | 倪 Sales by Film Category 站 
ss Change Chart Type ~ 量 Download Chart ~ 
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接 下 来 ， 我 们 就 来 实现 这 个 柱状 图 : 


Ext .define('Packt .view.reports.SalesFilmCategoryColumn', { 
extend: 'Ext.chart.Chart', 
alias: 'widget.salesfilmcategorycol', 


animate: true, 
store: 'reports.SalesFilmCategory', // #1 
shadow: true, 
insetPadding: 60, 
theme: 'Base:gradients', 
axes: [{ 
type: 'Numeric', // #2 
position: 'left', 
fields: ['total sales'], // #3 
label: { 
renderer: Ext.util.Format.numberRenderer('0,0') 
上 
title: ' Total Sales', 
grid: true, 
minimum: 0 


type: 'Category', // #4 
position: 'lbottom', 
fields: ['category'], // #5 
title: 'Film Category' 
}], 
series: I[{ 
type: 'column', // #6 
axis: 'left', 
highlight: true, 
tips: { 
trackMouse: true, 
width: 140, 
height: 28, 
renderer: function(storeIlItem, item) { 


this.setTitle(storeItem.get('category') + ': + 
storeItem.get('total sales') + ' S$'); 
} 
上 
label: { 
display: 'insideEnd', 
'text-anchor': 'middle', 
field: 'total sales', 
renderer: Ext.util.Format.numberRenderer('0'), 
orientation: 'vertical', 
COlor: '#333' 
}, 
xField: 'category', // #7 
yField: 'total sales' // #8 
}] 
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柱状 图 与 饼 图 使 用 同一 个 存储 妖 (#1 )。 由 于 柱状 图 是 一 个 笛 卡 儿 图 ， 因 此 需要 定义 X 轴 和 Y 
轴 。 我 们 在 左边 竺 直 放 置 数 轴 ( 雪 ), 数 轴 用 total_sales 字 段 值 表示 (#3 ), 下 一 步 是 Category 
轴 (#)， 这 是 一 个 标签 字段 ， 代 表 图 表 的 各 列 。category 轴 用 category 字 上 段 值 表示 (#5 )。 


接 下 来 我 们 定义 series 属 性 配置 项 。 该 属性 定义 待 实现 图 表 的 类 型 ， 这 里 我 们 要 实现 的 是 
一 个 柱状 图 (#6 )。 还 需要 分 别 定义 X 轴 和 7 铀 字段 ,以便 图 表 能 够 讯 取 并 应 用 每 个 轴 的 正确 字段 。 
XX 轴 字 段 (水 平方 回 的 ) 用 category 字 有 段 表示 (# )，7 轴 字段 ( 垂 耻 方 同 的 ) 用 total_sales 
字段 表示 (#8 )。 有 一 点 非常 重要 : xField (#) 匹配 category 轴 (类 )，yField (#8) 匹配 
数 轴 ( 垂直 方向 /位 于 左边 : 机 )。 


条 形 网 其 实 就 是 进行 了 微小 变化 的 柱状 图 。 我 们 需要 转换 坐标 轴 ( category 轴 在 左边 ， 数 
轴 在 底部 上 xField 属 性 (用 total_sales 替 代 category ) 以 及 yField 属 性 ( 用 category 蔡 


代 total sales - 


条 形 图 效果 如 下 图 所 示 : 
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8.3.3 ”图 表面 板 

由 于 我 们 想 要 呈现 一 个 面板 并 人 允许 用 户 更 改 图 表 类 型 ， 因 此 ， 需 要 创建 一 个 使 用 cardq ( 卡 
片 式 ) 布局 的 面板 。 要 记 住 ，cargd 布 局 主要 用 于 有 好 几 个 子 项 、 但 希望 一 次 只 显示 一 个 子 项 的 
问 导 式 情形 。 同 时 ， 当 前 显示 项 使 用 的 是 Fit 布 局 。 
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现在 来 创建 图 表面 板 : 

Ext .define('Packt .view.reports.SalesFilmCategory', { 
extend: 'Ext.panel.Panel', 
alias: 'widget.salesfilmcategory', 
layout: 'card', 


activeItem: 0, 


items: | 
{ 
xtype: 'salesfilmcategorypie' // #1 
}, 
{ 
xtype: 'salesfilmcategorycol' // #2 
}, 
{ 
xtype: 'salesfilmcategorybar' // #3 
} 
] ， 


dockedItems: [{ 
xtype: 'toolbar', 
flex: 1, 
dock: 'top', 
items: [ 

// items 属 性 配置 项 声明 #4 

] 

}] 

}); 


我 们 需要 声明 一 个 面板 并 声明 已 创建 的 每 个 图 表 为 子 项 。 因 此 ， 可 以 声明 人 饼 图 (#1 )、 柱 状 
图 (可 ) 以 及 条 形 图 ( 雪 ) 作为 Sales by Film Category (影片 类 别 销售 图 面板 ) 的 子 项 。 默 认 情 
况 下 ， 子 项 0 (第 一 个 子 项 : 饼 图 ) 将 成 为 图 表面 板 演 染 时 呈现 的 默认 选项 。 

接 下 来 ， 我 们 将 声明 一 个 包含 Menu《〈 荣 单 ) 按钮 的 工具 栏 ， 以 便 用 户 可 以 选择 图 表 类 型 以 
及 下 载 保存 的 文件 格式 。 因 此 ， 将 以 下 代码 放 在 上 述 代 码 里 标识 译 的 位 置 上 : 


{ 


text: 'Change Chart Type ' ， 


IConC1Ss: 'menu reportsSs ' ， 
menu: { 
xtype: 'menu', 


itemId: 'changeType', 
items: | 
{ 
xtype: 'menuitem', 
text: 'Pie', 
itemId: 'pie', 
iconCls: 'chart pie' 
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xtype: 'menuitem', 
text: 'Column', 
itemId: 'column', 
iconCls: 'chart_ bar' 

}, 

{ 
xtype: 'menuitem', 
text: 'Bar', 
itemId: 'lbar', 
iconCls: 'chart_ column' 


} 


第 一 个 声明 的 菜单 按钮 是 Change Chart Type 按 钮 ， 如 下 图 所 示 : 


| 侈 Home | 小 Sales 
| Ey Pie 


区 Bar 


现在 我 们 有 了 一 个 作为 工具 栏 子 项 的 Change Chart Type 按钮 ( 记 住 ， 这 个 按钮 是 工具 栏 子 项 
的 坎 认 xtype )， 该 按钮 有 一 个 包含 三 个 采 单 项 的 采 单 ， 每 个 采 单 项 对 应 一 种 图 表 类 型 


A 人 Eo 


工具 栏 第 二 个 子 项 是 Download Chart 按 钮 。 与 Change Chart Type 按 钮 一 样 ，Download Chart 
按钮 也 有 一 个 包含 3 个 采 单 项 的 采 单 ， 每 个 采 单 项 对 应 一 种 下 载 保存 类 型 : 


{ 
text: 'Download Chart', 


liconCls: 'download', 
menu: { 
xtype: 'menu', 
itemId: 'download', 
items: I[ 
{ 
xtype: 'menuitem', 
text: 'Download as Image', 
itemId: 'png', 
iconCls: 'image' 
}, 
{ 
xtype: 'menuitem', 


text: 'Download as SVG ' ， 
itemId: 'svg', 


IConC1S: 'SsVvg' 


xtype: 'menuitem', 

text: 'Download as PDF', 
itemId: 'pdf', 

liconCls: 'pdf' 


} 


Download Chart 按 钮 的 效果 如 下 图 所 示 : 


量 Download Chart” 
里 Pownload as Image 


Cownload as SV'G 


h Download as PDF 


8.3.4 更 改 图 表 类 型 


由 于 用 户 可 通过 选择 Menu 按 钮 的 菜单 选项 更 改 图 表 类 型 ， 因 此 ， 我 们 首先 需要 监听 
menuitem (菜单 项 ) 的 点 击 事件 : 


"salesfilmcategory menui#changeType menuitem": { 
click: this.onChangeChart 
} 


menuitem 点 击 事件 与 按钮 点 击 事 件 类 似 ; 不 同 点 在 于 我 们 要 找 的 沫 单项 在 itemId 为 
changeType 的 亲 单 里 。 当 用 户 点 击 一 个 这 单 项 时 ，Films 控 制 问 将 执行 以 下 方法 : 


onChangeChart: function(item, e, options) { 


Var panel = item.up('salesfilmcategory'); // #1 
if (item.itemId == 'pie')t 
panel .getLayout() .setActiveItem(0); // #2 
} else if (item.itemId == 'column')t 
panel .getLayout() .setActiveItem(1); // #3 
} else if (item.itemId == 'bar')t 


panel .getLayout() .setActiveItem(2); // #4 
} 
} 


首 乞 ， 我 们 需要 获取 面板 ， 这 样 就 能 改变 活动 子 项 〈 朴 )。 然 后 ， 比 较 用 户 点 击 亲 单项 的 
itemId， 并 根据 用 户 选 择 设 置 活 动 子 项 〈《 杞 、 交 和 二 )。 
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8.3.5 ”图 表 导 出 成 图 片 格式 (PNG 和 SVG) 


如 同 Change Chart Type 且 单 按钮 ， 我 们 将 在 控制 右上 按 同 样 的 好 辑 监听 事件 ， 不同 之 处 在 于 
我 们 监听 的 亲 单 项 属于 itemId 属 性 设置 为 down1oagd 的 末 单 : 


"salesfilmcategory menu#download menuitem": f{ 
click: this.onChartDownload 


} 
下 面 的 onChartDownload 方 法 与 Change Chart Type 采 单项 有 相同 的 处 理 逻 辑 。 但 在 这 里 ， 
我 们 要 做 的 古 将 图 片 保 存 为 PNG 或 SVG 文 件 。 


onChartDownload: function(item, e, options) { 


Var chartPanel = item.up('salesfilmcategory'); 
Var chart = chartPanel .getLayout() .getActiveItem(); // #1 
if (item.itemId == 'png')t 
Ext .MessageBox.confirm('Confirm Download ' ， 
'Would you like to download the chart as Image?', function(choice)t 
if(choice == 'yes')t 
chart.savelt // #2 


type: 'image/png' 
}); 
} 
}); 
} else if (item.itemId == 'svg')t 
Ext .MessageBox.confirm('Confirm Download ' ， 
'Would you like to download the chart as SVG + XML?'，ftunction(choice){ 


if(choice == 'yes')t // #3 
chart.savel(t 
type: 'image/svg+xml' 


}); 


}); 
} 
// 下 载 保存 成 PDF 文 件 (下 一 节 实 现 ) 
} 


chart 类 已 有 个 名 为 save 的 方法 了 ,我 们 可 以 用 来 将 图 表 下 载 保存 为 图 片 格式 。 这 是 Ext JS 
提供 的 原生 功能 。 
站 完 ， 我 们 需要 获取 图 表 引 用 ， 可 以 通过 图 表面 板 chartPanel1 的 活动 子 项 获得 (#1 )。 


接 下 来 , 根据 用 户 选 择 , 先 询 问 用 户 是 否 确 定 将 图 表 下 载 保存 为 特定 格式 , 如 果 确 定 , Ext JS 
将 生成 这 个 文件 。 当 用 户 下 载 保存 PNG ( 埠 ) 或 SVG (#3 ) 文件 时 ,我 们 只 需 调 用 cnart 引 用 的 
save 方 法 ， 并 传人 用 户 选 择 的 特定 类 型 (PNG 或 SVG ) 即 可 。 在 这 里 ， 应 用 程序 将 发 送 一 个 请 
求 到 http://svg.sencha.io， 然 后 开始 下 载 。 


以 下 截图 是 选择 将 图 表 保 存 为 PNG 格 式 文件 时 生成 的 图 三 : 
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8.3.6 图 表 导 出 成 PDF 格式 
接 下 来 完成 本 草 最 后 一 个 功能 的 代码 : 


else if (item.itemId == 'pdf')t 
Ext .MessageBox.confirm('Confirm Download', 


'Would you like to download the chart as PDF?', function(choice)t 
if(choice == 'yes')t 
chart.savel(t // #4 
type: 'image/png', 
url: 'php/pdf/exportChartpdf .php' 


在 标识 机 处 可 以 看 到 ， 我 们 调用 了 chart 类 的 save 方 法 ， 同 时 还 传 入 了 一 个 URL。 


如 果 我 们 进一步 分 析 save 方 法 5 就 会 发 现 它 调 用 Ext .draw.engine. ImageExporter 类 
的 generate 方 法 。ImageExporter 类 使 用 aefaultUr1 作 为 请 求 发 送 的 目标 URL， 我 们 可 以 对 其 
进行 自 定 义 。 如 有 果 我 们 观察 下 请 求 ， 就 会 发 现 它 发 送 了 四 个 参数 到 服务 器 端 : width 、height 、type 
和 svg: 
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TForm Data ViewW SOUrCe View IRL encoded 
width: 715 


height: 316 

type: 1mage/png 

svea: <?xml version="1.8" standalone="yes" ?><!DOCTYPE svg PUBLIC “一 ”WwW3SCA7 DOTD 
SVG 1.lEN™ "http:/ www w3.o0rg/oraphics/ /SVo/l. DTD/svwol1l .dtd"s><svg width 
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PE YY Wa oro/l999xlink" version="1.]"><defs><linearGradient xl1="@" yl1="@ 
" x2="1" y2="@.99999999999999938"” id="theme-94aeBa-bbre@7—13624444BS5698B"><st 
op offset="®%" stop—-color="#94aeBa" stop-opacity="l"></stop><stop offset="1 
BB stop—-color="#6breBi" stop-opacity="1"s</stop></ linearGradients<lineartG 
radient xl1="8" yl="®" x2="]1" y2="8.9999999999999998" id="theme-l11iS5Sfab—@cd457 
B13ETAAAARCEDR Ttnn nfoaet— "Be" ctnnornl nr tit11cCFaFE" ctnnonnariftu— 1 
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因此 ， 我 们 需要 在 服务 如 端 获取 这 些 通 过 POST 请 求 发 送 过 来 的 信息 项 : 


Sswidth = $_POST['width']; 
Sheight = $_POST['height']; 
Stype = $_ POST['type'l]; 
SSvg = S$_ POST['svg']; 


通过 TCPDF 类 库 ， 我 们 可 以 使 用 ImagesvG 方 法 并 传人 这 些 参数 : 


Spdf->ImageSVG ($file='@' .Ssvg, S$x=10, Sy=10, Sw=$width, S$h=$height, S$link="''" 
Salign='T', Spalign='C', Sborder=0, S$fitonpage=true); 


奇迹 发 生 了 ! 生成 的 PDF 文 件 如 下 图 所 示 : 


目 上 日 日 3 chart 3) pdf (1 pace) we” 


[Eplremmeylee eaeje ) 


如 果 存 在 某 些 原因 使 应 用 程序 部 署 的 环境 无 法 提供 跨 域 ( 如 http://svg.sencha.io ) 请 求 ， 你 可 
以 使 用 同样 方式 生成 PNG、JPEG 或 SVG 格 式 文件 。Ext JS 总 是 发 送 上 述 四 个 参数 给 服务 需 端 ; 我 
们 只 需要 根据 实际 来 处 理 它 们 即 可 。 


8.4 ”小 结 179 


8.4 ”小 结 
本 章 我 们 学 习 了 如 何 将 网 格 面板 的 内 容 导 出 成 PDF、Excel 格 式 ， 以 及 如 何 生 成 打印 页 面 。 


我 们 学 习 了 如 何 创 建 不 同类 型 的 图 表 ， 只 使 用 一 个 组 件 ( 图 表面 板 SalesFilmCategory 组 
件 ) 并 改变 其 活动 子 项 、 借 助 Ext JS 原生 功能 将 图 表 导 出 为 图 片 或 SVG 文件 。 我 们 同时 还 竺 握 了 
将 网 表 导 出 为 PDF 文件 的 方法 。 


到 目前 为 止 ， 我 们 完成 了 与 Sakila 数 据 库 相关 的 应 用 系统 功能 的 开发 。 下 一 章 我 们 将 学 习 
如 何 创建 一 个 看 起 来 跟 Outlook 很 像 的 电子 邮件 客户 端 。 


电子 邮件 各 己 端 模块 


本 章 我 们 将 实现 应 用 程序 的 最 后 一 个 模块 ， 参 考 Outlook ( 微软 的 一 个 非常 流行 的 电子 邮件 
客户 并 ) 的 外 观 开 发 一 个 电子 邮件 客户 端 模块 。 


本 章 主要 包括 以 下 内 容 : 

口 设计 电子 邮件 客户 端 ; 

口 列 出 邮件 ; 

口 创建 收 件 箱 沫 单 〈 树 形 面板 荣 单 ); 

口 将 邮件 拖 放 至 新 文件 夹 ( 网 格 与 树 形 组 件 之 间 ); 
口 优化 网 格 面板 。 


9.1 创建 收 件 顶 : 邮件 列表 
开始 之 前 ,我们 先 来 看 一 看 本 章 功 能 开发 完成 后 的 最 终 效果 图 ， 


Video Store Manager - Mastering Ext Js 
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Mastering ExtJS book - Loiane Groner - http:/ /packtpub.com 
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这 个 电子 邮件 客户 端 由 4 个 主要 部 分 组 成 : Mail ( 邮件 ) 菜单 、Inbox ( 收 件 箱 ， 邮 件 列表 )、 
邮件 预览 主 面板 以 及 New Message ( 新 建 邮件 ) 窗 体 。 我 们 准备 先 实 现 收 件 箱 功 能 ， 它 是 一 个 增 
强 的 网 格 面板 。 按 照 既 定 的 开发 流程 ,我 们 将 首先 创建 模型 ， 然 后 是 存储 天 ， 再 然后 是 视图 ， 最 
后 创建 控制 硕 并 监听 动作 触发 的 事件 。 


9.1.1 邮件 信息 模型 


首先 ， 我 们 需要 创建 一 个 新 模型 Packt .model .mail.MailMessage, 用 以 表示 准备 显示 在 
网 格 面板 上 的 邮件 信息 : 


ExXt .aqaefline(' Packt.modqel.mall1.MallMessagde'，({ 
extend: 'Ext.data.Model', 
fields: [| 

{ name: 'importance’' }, 
{ name: 'icon' }, 

{ name: 'attachment' es 
{ name: 'from' }, 

{ name: 'subject' }, 

{ name: 'received' }, 

{ name: 'flag’' }, 

{ name: 'folder' }, 

{ name: 'content' }, 

{ name: 'id' } 


}); 

importance 字 上段 显 示 红 色 惊 叹 号 标记 , 表示 邮件 以 高 优先 级 发 送 ; icon 字 上段 是 邮件 信息 的 
图 标 (已 恋 、 未 读 、 转 发 、 回 复 以 及 回复 全 部 ) attachment 字 段 表示 邮件 有 附件 ;flag 字 段 
表示 着 标 状 态 ( 在 Outlook 里 用 作 后 续 跟 躁 标志 ); folqer 字 段 用 来 存放 邮件 ( 收 件 箱 、 草 向 箱 
以 及 垃圾 箱 ， 诸 如 此 类 )。 


这 基本 上 就 是 一 个 人 简单 的 模型 ， 跟 我 们 前 面 几 鞋 实 现 的 模型 没什么 区 别 。 


9.1.2 ”邮件 信息 存储 器 
接 下 来 ,我 们 实现 一 个 加 载 邮件 信息 的 存储 右 。 创 建 存储 絮 类 Packt.store.mail 
.MailMessages: 


Ext .define('Packt.store.mail.MailMessages', { 
extend: 'Ext.data.Store', 


requires: | 
'Packt .model.mail .MailMessage', 
'Packt .proxy.Sakila' 
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model: 'Packt.model .mail.MailMessage', 
autoLoad: true, 


proxy: { 
type: 'sakila', 
api: { 
read: 'php/mail/listInbox.php', 
update: 'php/mail/update.php' 
} 
} 
}); 


我 们 将 从 服务 需 端 加 载 (rzeadq ) 邮件 信息 (出 于 示例 的 目的 ， 不 打算 集成 像 Gmail、 
Hotmail/Outlook、Yahoo 以 及 其 他 的 邮件 服务 )。 


如 来 改变 了 邮件 文件 来 ， 我 们 也 将 相应 地 修改 (update ) 邮件 信息 。 后 续 我 们 还 会 实现 拖 
放 功 能 。 


在 本 例 中 , 我 们 将 从 服务 器 端 取 回 所 有 的 模型 信息 。 如 果 用 户 有 大 量 邮件 ,存储 器 就 需要 一 
段 时 间 来 加 载 信息 。 就 目前 掌握 的 知识 , 我 们 可 以 采取 两 种 不 同 的 处 理 方式 : 第 一 种 方式 是 实现 
一 个 分 页 工具 栏 ; 第 二 种 方式 是 按 需 加 载 content ( 内 容 ) 字段 ， 即 只 有 当 用 户 点 击 收 件 箱 中 的 
一 个 邮件 时 才 读 取 其 内 容 。 


9.1.3 ”邮件 列表 视图 
最 后 来 实现 视图 ， 这 是 一 个 网 格 面 板 ， 我 们 将 其 命名 为 Packt .view.mail.MailList: 


Ext.define('Packt.view.mail.MailList', { 
extend: 'Ext.grid.Panel', 
alias: 'widget.maillist', 


title: 'Inbox', 
store: 'mail.MailMessages', 


viewConfig: { 
getRowClass: function(record, rowIndex, rowParams, store)t{ 
if (record.get('icon') == '‘'unread'){ // #1 
return "boldFont™"; 
} 
} 
}, 
columns: | 
// 这 里 声明 各 列 
] 
}); 


上 述 代码 中 有 一 段 需要 我 们 注意 : viewConfig 属 性 配置 项 中 的 getRowClass 旺 数 。 在 这 个 
为 数 里 ， 我 们 可 以 返回 一 个 CSS 样 式 ， 这 个 样式 将 应 用 于 网 格 面板 上 一 条 记录 的 所 有 单元 格 。 在 
本 例 中 ， 如 果 邮 件 是 unreadq(〈 未 读 ) 状态 〈 训 )， 我 们 考虑 通过 应 用 boldFont 样 式 使 此 行 的 字 
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体 为 粗 体 。 如 果 已 读 ， 那 么 就 什么 也 不 用 做 了 。 
我 们 需要 在 app.css 文 件 里 声明 这 个 样式 : 
.boldFont .x-grid-cell { 


font-weight:bold; !important; 
} 


接 下 来 声明 网 格 面板 的 各 列 。 我 们 逐个 实现 它们 ， 这 样 就 可 以 详细 和 擎 握 细 记 。 首 先 ， 声 明 
importance 列 ， 如 果 邮 件 以 高 优先 级 发 送 ， 那 么 它 将 显示 一 个 红色 的 惊叹 号 标记 。 


{ 


xtype: 'gridcolumn', 
cls: 'importance', // #2 
width: 18, 
dataIndex: 'importance', 
menuDisabled: true, 
text: 'Importance', 
renderer: function(value, metaData, record ) { 
If (value == 1){ 
metaData.css = 'importance'; // #3 
} 


return ''，: 
} 


这 里 有 两 个 需要 重点 关注 的 地 方 : 观察 一 下 前 面 的 电子 邮件 客户 端的 完整 截图 , 我 们 会 注意 
到 网 格 头 部 不 是 文字 而 是 图 标 。 怎 样 在 网 格 头 部 显示 一 个 图 标 呢 ? 很 测 单 ,只 需 在 columns 里 声 
明 cls 属 性 ， 应 用 CSS 样 式 到 网 格 头 部 即 可 (#2 )。 


importance CSS 代 码 如 下 : 


.importance { 

background:transparent url('../icons/mail/priority high.gif') no-repeat 3px 
3px !important; 

text-indent:-250px; 
} 


如 果 邮 件 按 高 优先 级 发 送 , 我 们 希望 在 网 格 的 单元 格 里 显示 一 个 图 标 而 非 文 学 。 要 想 实 现 这 
个 目的 ， 也 需 在 rendqerer 图 数 里 应 用 importance CSS 样 式 到 网 格 单元 格 上 (〈 雪 )。 然 后 返回 一 
个 空 字 符 串 ， 因 为 我 们 并 不 想 显 示 文 字 。 

接 下 来 ， 我 们 声明 显示 图 标 消 息 的 icon 列 ， 换 言 之 ， 它 告诉 用 户 邮 件 是 哪 种 类 型 : 已 该 、 
未 谈 、 回 复 、 转 发 或 是 回复 全 部 : 


{ 


xtype: 'gridcolumn', 
cls: 'icon-msg', // #4 
width: 21， 


dataIndex: 'icon', 
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menuDisabled: true, 


text: 'Icon', 

renderer: function(value, metaData, record ){ 
metaData.css = value; // #5 
metaData.tdAttr = 'data-gqtip="' + Value + '"'; // #6 
return '! 


} 


我 们 将 再 次 在 网 格 头 部 显示 一 个 图 标 ， 因 此 需要 声明 cl1s 属 性 〈 灼 )。 同时 还 要 在 网 格 单元 
格 里 显示 一 个 图 标 ， 但 这 次 ， 该 列 的 CSS 将 是 从 数据 库 取 回 的 列 值 本 身 (#5 )。 


当 用 户 的 鼠标 悬 停 在 网 格 单元 格 上 时 , 需要 显示 一 个 快速 提示 信息 。 我 们 同样 可 以 通过 设置 


metadata 的 tdattr 属 性 值 来 实现 这 一 功能 (#6 )。 本 例 中 ,快速 提示 信息 将 显示 数据 库 获取 的 
列 值 ， 结 末 如 下 图 所 示 : 


Tnbox 
国 = 
国 |E 章 From 


Ee 下 Packt Publishing 
+" Packt Publishing 
Packt Publishing 


attachment 列 的 代码 与 前 面 几 列 的 很 相似 


{ 
xtype: 'gridcolumn', 
cls: 'attach', // #7 
width: 18, 
dataIndex: 'attachment', 
menuDisabled: true, 
text: 'Attachment', 
renderer: function(value, metaData, record ) { 


if (value == 1){ 

metaData.css = 'attach'; // #8 
} 
return '! 


} 

我 们 打算 在 网 格 头 部 (#7 )、 网 格 单 元 格 中 (#8 ) 显示 一 个 图 标 。 
flaggedq 列 也 一 样 : 

{ 


xtype: 'gridcolumn', 
cls: 'flagged', // #9 
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width: 20， 

dataIndex: 'flag', 

menuDisabled: true, 

text: 'Flag', 

renderer: function(value, metaData, record ) { 


if (value == 1){ 

metaData.css = 'flag-e-mail'; // #10 
} 
return '';} 


} 


我 们 打算 在 网 格 头 部 (#9 )、 网 格 香 元 格 中 (#10 ) 显示 一 个 图 标 。 
下 一 步 声明 剩 余 的 几 列 ， 在 网 格 头 部 ( 通常 情况 下 )、 网 格 单 元 格 内 容 里 显示 文字 : 


{ 
xtype: 'gridcolumn', 
dataIndex: 'from', 
menuDisabled: true, 
width: 150, 
text: ‘From' 


xtype: 'gridcolumn', 
dataIndex: 'subject', 
menuDisabled: true, 
flex: 1, 

text: 'Subject' 


xtype: 'gridcolumn', 
datalIndex: 'received', 
menuDisabled: true, 
width: 130, 

text: 'Received' 


} 

当前 代码 的 输出 结果 如 下 图 所 示 , 这 是 一 个 对 网 格 头 部 、 网 格 单元 格 进行 了 个 性 化 设置 ， 同 
时 在 网 格 记录 上 应 用 了 上 自 定义 CSS 样 式 的 网 格 面板 。 所 有 这 些 功 能 部 是 徘 原 生 技术 实现 的 ,不 需 
要 第 三 方 插 件 : 


?From Subject Received 
ES 壳 Packt Publishinmg [Packt Newsletter] Great Offers, Exciting Ne... 2013-02-27 13:16:,.. 


"后 Packt Publishing [PacktLib Newsletter] Home to over 1000 books a014-02-27 00:42:00 
地 中 Packt Publishing Great Offer on PrimeFaces Cookbook - Less than 24 ... 2013-02-26 12:33:00 
Ee Packt Publishing [Packt Mewsletter] Special Discounts, New Releases... 2013-02-18 14:21:00 
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9.1.4 邮件 预览 面板 
还 剩 下 一 个 细节 需要 处 理 ， 那 就 是 可 以 在 前 面 的 截图 上 看 到 的 菜单 按钮 


dockedItems: [ 


{ 
xtype: 'toolbar', 
dock: 'top', 
items: I[ 
{ 
xtype: 'lbutton', 
liconCls: 'preview-hide', 
menu: { 
xtype: 'menu', 
itemId: 'preview', 
width: 120, 
items: I[ 
{ 
xtype: 'menuitem', 
itemId: 'hide', 
liconCls: 'preview-hide', 
text: 'Hide Preview' 
}, 
{ 
xtype: 'menuitem', 
itemId: 'bottom', 
liconCls: 'preview-bottom', 
text: 'Preview Bottom' 
}, 
{ 
xtype: 'menuitem', 
itemId: 'right', 
iconCls: 'preview-right', 
text: 'Preview Right' 
} 
] 
} 
} 
] 
} 


] 


这 个 沫 单 允 许 用 户 改 变 预 唤 标 签 表 单 的 位 置 ( 右边 或 底部 ), 甚 至 隐藏 预览 面板 ( Hide Preview )， 
如 下 图 所 示 : 


| 
国 z| 


[| 国 Ride Preview 


国 preview Bottom | 


是 |] mewiaw Ri ght 


9.2 ”邮件 菜单 〈 树 形 菜 单 ) 187 


9.2 ”邮件 菜单 〈 树 形 菜 单 ) 
下 一 步 ， 我 们 将 创建 列 出 收 件 箱 (Inbox ) 里 的 文件 夹 的 菜单 ， 如 下 图 所 示 : 


9.2.1 树 形 邮件 菜单 存储 器 


按照 惯例 ， 我 们 从 创建 模型 和 存储 器 入 手 。 由 于 使 用 NodeInterface 类 表示 每 个 hode ( 树 
节点 缺 省 类 ), 因此 我 们 不 再 需要 进行 任何 自 定义 一 一 不 必 声 明 模 型 *, 可 以 直接 实现 树 形 菜单 的 
存储 右 : 


Ext .define('Packt.store.mail.MailMenu', { 


extend: 'Ext.data.TreeStore', 
clearOnLoad: true, 


proxy: { 
type: 'ajax', 
url: 'php/mail/mailMenu.php', 
} 
}); 


我 们 将 从 服务 硕 闪 加 载 JSON 格 式 数 据 。 相 关 的 PHP 代 码 很 测 单 , 只 是 返回 所 需 JSON 数 据 (已 
被 便 编 码 成 一 个 字符 串 了 了 ): 


<?php 

echo '[{ 
"ews "TNOR", 
"IconC1s": "folder-inbox", 
"leaf": true 

} ,1 
re en 
"jconCls": "folder-sent", 
"leaf": true 

} ,1 
"Em 二 和 SET 


GD 树 节点 是 用 NodeInterface 包 装 好 的 一 个 模型 实例 。 一 一 译 者 注 
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"jconCls": "folder-drafts", 
"leaf": true 


"text": "Trash", 
"iconCls": "folder-trash", 
"leaf": true 

}] 


?> 


9.2.2 创建 邮件 菜单 视图 
接 下 来 创建 表示 邮件 菜单 的 树 形 面板 ， 这 是 一 个 很 简单 的 树 形 面 板 : 


Ext .define('Packt.view.mail.MailMenu', 
extend: 'Ext.tree.Panel', 
alias: 'widget.mailMenu', 


cls: 'selected-node', // #1 
autoScroll: true, 

store: 'mail.MailMenu', 
rootVisible: false, 

split: true, 

width: 150, 

collapsible: true, 

title: 'Mail', 


dockedItems: | 
{ 

xtype: 'toolbar', // #2 

dock: 'top', 

items: I[ 

{ 

xtype: 'button', 
liconCls: 'new-mail', 
text: 'New Message', 
itemId: 'newMail' 


}); 


这 里 有 两 点 需要 注意 ,第 一 点 是 当 用 户 从 树 形 面板 上 选择 一 个 节点 时 ,我 们 希望 它 加 粗 显 示 ， 
因此 ， 需 要 应 用 一 个 CSS (#1 ) 样式 来 实现 : 


.Selected-node .x-grid-row-selected .x-grid-cell { 
font-weight: bold; 
} 


第 二 点 是 实现 了 一 个 带 有 New Message ( 撰写 新 邮件 ) 按钮 的 工具 栏 (总 )， 用 户 可 以 撰写 
及 发 送 新 邮件 。 


9.3 ”邮件 容器 : 组 织 电 子 邮 件 客 户 端 189 


9.3 邮件 容器 : 组 织 电 子 邮件 客 忆 站 


目前 , 我 们 已 经 实现 了 两 个 主要 的 电子 邮件 客户 剖 模 块 。 现 在 第 要 组 织 它 们 , 以 使 界面 看 起 
来 如 本 章 开 头 的 截图 所 示 。 要 达成 此 目标 ， 我 们 需要 次 加 一 个 使 用 边界 布局 的 容 需 。 


， 为 什么 要 使 用 容器 而 非 面板 呢 ? 容 器 是 个 比 面板 更 轻 量 级 的 组 件 ,我 们 不 需 
要 使 用 诸如 面板 头 部 和 DockedItem 此 类 的 面板 功能 ， 只 想 把 组 件 包 装 起 来 并 用 
特定 布局 组 织 它 们 而 已 。 因 此 ， 在 本 例 中 ， 容 器 是 更 好 的 选择 。 


来 看 看 Mail1container 组 件 的 代码 . 


Ext .define('Packt.view.mail.MailContainer', 
extend: 'Ext.container.Container', 
alias: 'widget.mailcontainer', 
requires: [ // #1 


'Packt.view.mail.MailList', 
'Packt .view.mail.MailpPpreview', 
Packt .view.mail.MailMenu' 


] [A 


layout: { 
type: 'border' // #2 
}, 


initComponent: function() { 
var me = this; 
Var mailPreview = { // #3 
xtype: 'mailpreview', 
autoScroll: true 


}; 


me.items = | 


{ 


xtype: 'container', // #4 


region: 'center', 
itemId: 'mailpanel', 
layout: { 


type: 'lborder' 
}, 
items: [| 
{ 
xtype: 'maillist', 
collapsible: false, // #5 
region: 'center' 
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xtype: 'container', 

itemId: 'previewSouth', // #6 
height: 300, 

hidden: true, 

collapsible: false, 

region: 'south', 

split: true, 

layout: 'fit', 

items: [mailPreviewl 


xtype: 'container', 

width: 400, 

itemId: 'previewEast', // #7 
hidden: true, 

collapsible: false, 

region: 'east', 

split: true, 

layout: 'fit', 

items: [mailPpreviewl 


xtype: 'mailMenu', // #8 
region: 'west', 


3 
me.callParent (arguments).; 
} 
本 有: 
要 牢记 ， 我 们 目 己 创 建 〈 非 原生 既 有 )、 准 备用 其 xtype 来 实例 化 的 类 一 定 要 在 reauires 
中 声明 (#1 )。 
我 们 将 使 用 边界 布局 (过 ) 目的 是 把 邮件 沫 单 放 在 容 需 左 侧 , 邮件 列表 和 预览 窗 体 放 在 中 间 。 
由 于 我 们 打算 声明 一 个 邮件 预览 容 硕 , 可 根据 用 户 选 择 显示 在 邮件 列表 的 瓜 部 或 右 侧 , 并 避 
人 锡 代 码 重复 ， 因 此 ， 我 们 只 声明 它 一 次 (#3 )， 并 在 #6 和 #7 处 重用 它 。 
接 下 来 是 邮件 面板 ， 用 来 组 织 邮件 列表 和 邮件 预览 容 硕 。 邮 件 面板 ( 震 ) 也 使 用 边界 布局 ， 
其 子 项 分 别 位 于 中 央 位 置 ( 中 央 区 域 是 强制 性 的 入 确 部 和 右 侧 〈 邮件 预览 容 融 )。 


遇 件 列表 子 项 ( 兹 ) 位 于 邮件 面板 中 央 。 邮件 预 览 容 胡 位 于 邮件 面板 砌 部 (大 ) 或 右 侧 (#7 )。 
我 们 将 使 用 在 邮件 列表 中 声明 的 沫 单 按钮 来 控制 邮件 预 金 容 带 的 隐藏 渎 显示。 最 终 , 我 们 将 获得 
创建 完成 的 邮件 沫 单 〈 袁 ) 


现在 ， 唯 一 还 未 实现 的 是 邮件 预览 组 件 ， 它 也 是 个 容 希 ， 并 使 用 fit 布 局 (我们 乔 望 邮件 内 
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容 占 满 容 各 的 剩余 空间 ): 


Ext .define('Packt.view.mail.MailPpreview', f{ 
extend: 'Ext.container.Container', 
alias: 'widget.mailpreview', 


layout: 'fit' 
}); 


9.4 控制 器 

现在 , 我 们 需要 的 东西 部 准备 好 了 , 接 下 来 实现 允许 用 户 选 择 邮 件 预 览 面 板 位 置 的 功能 。 用 
户 可 以 选择 将 预览 面板 放 在 右 侧 或 底部 ， 甚 至 隐藏 它 。 

因此 ， 第 一 步 要 做 的 是 为 电子 邮件 客户 端 模块 创建 一 个 新 的 控制 右 : 


Ext .define('Packt.controller.mail.Mail', f{ 
extend: 'Ext.app.Controller', 


views: [ // #1 
'mail.MailContainer', 
'mail.MailList', 
'mail.Mailpreview' 


] [A 


stores: [// #2 
'mail.MailMessages', 
'mail.MailMenu' 


] 了 


refs: [// #3 
{ 
ref: 'south', // #4 
selector: 'mailcontainer container#previewSouth,' 


ref: 'east', // #5 
selector: 'mailcontainer container#previewEast' 


] 
}); 


首先 , 要 记得 声明 我 们 为 模块 创建 的 视图 (#1 )。 之 后 是 声明 存储 器 ( 埠 )。 最 后 , 需要 声明 
某 些 引用 〈 妈 ) 声明 位 于 邮件 容 各 压 部 (大 ) 和 右 侧 〈 兹 ) 的 邮件 预览 容 硕 的 引用 。 


要 记 住 ， 引 用 始终 通过 选择 硕 创 建 组 件 快 捷 方 式 。 我 们 可 以 声明 引用 并 使 用 诸如 
this. getSouth 的 人 简单 调用 ， 训 人 免 每 次 都 通过 Ext. ComponentQuery .query('malilcontai-— 
ner container#previewSouth) [0] 来 获取 引用 。 同 时 ， 如 采 将 来 需要 改变 选择 大 ， 这 人 么 做 便 
于 我 们 进行 维护 管理 ， 因 为 有 了 这 个 引用 ， 我 们 只 需 在 一 个 地 方 改变 选择 天 即 可 。 


192 第 9 章 ”电子 邮件 客户 端 模 块 


电子 邮件 预览 
接 下 来 ， 我 们 需要 监听 menuitem 的 点 击 事 件 : 


"menu#preview menuitem": { 
click: this.onMenuitemClick 


} 


我 们 使 用 前 几 音 监听 menuitem 点 击 事件 时 采取 的 方法 。 为 了 避免 一 个 个 地 监听 每 个 沫 单项 ， 
我 们 可 以 监听 特定 沫 单 的 所 有 沫 单项 , 之 后 , 在 方法 里 可 以 通过 itemId 找 到 哪个 集 单 项 被 点 击 了 : 


onMenuitemClick: function(item, e, options) { 


var button = item.up('button'); // #1 
var east = this.getEast(); // #2 
var south = this.getSouth().; // #3 


switch (item.itemId) { 

case 'bottom': // #4 
east.hide!(); 
south.show(); 
button.setIiconCls('preview-bottom').; 
break; 

case 'right': // #5 
south.hide(); 
east .Show() ; 
button.setIiconCls('preview-right').; 
break; 

default: // #6 
south.hide(); 
east.hide!(); 
button.setIiconCls('preview-hide'); 


break; 


} 
上 述 代 码 的 实现 思路 是 更 改 点 击 采 单 按钮 的 图 标 , 并 根据 用 户 选择 , 呈现 或 隐藏 砍 部 和 右 侧 
的 邮件 预 谢 容 船 。 
因此 ， 第 一 步 是 获取 沫 单 按钮 的 引用 〈 拓 )， 以 便 后 续 可 以 更 改 它 的 iconcls 属 性 。 接 下 来 ， 
需要 获取 底部 《将 ) 和 右 侧 〈 坊 ) 的 邮件 预览 容 伙 的 引用 。 


如 采用 户 选 择 在 的 部 呈现 预 宛 容 迄 ( 机 )， 束 得 隐藏 石 侧 容 右 并 显示 底部 容 保 。 如 采用 户 选 
择 在 右 侧 呈现 预 宽容 带 ( #75 ), 就 显示 右 侧 容 带 并 隐藏 的 部 容 侣 。 如 采用 户 选 择 隐藏 预 帘 容 右 ( #6 )， 
的 部 容 胡 和 右 侧 容 兹 束 痢 被 隐藏 。 


比如 ， 如 采用 户 选择 在 右 侧 呈现 预览 容 希 ， 其 效 末 如 下 图 所 示 : 
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9.5 组 织 电子 邮件 : 拖 放 


在 Outlook 中 ， 可 以 选中 一 封 邮 件 并 将 其 拖 放 到 为 一 文件 来 里 。 我 们 也 将 在 我 们 的 电子 邮件 
客户 病 模 块 里 实现 这 个 功能 。 但 有 一 个 细 市 需要 注意 : 首先 ， 我 们 需要 在 网 格 面板 〈 邮件 列表 ) 
和 和 树 形 面板 ( 邮件 沫 单 ) 之 间 实 现 拖 放 ; 其 次 , 我 们 并 不 想 把 邮件 从 网 格 面 板 移 动 到 树 形 面板 中 。 
我 们 只 想 简单 地 把 邮件 蚊 (注意: 不 是 放 ) 至 树 形 面板 的 一 个 证 点 ， 并非 真 要 把 邮件 当成 新 市 护 
深 加 到 树 形 面板 中 ( 而 这 意味 春 要 把 这 封 邮件 座 加 到 树 形 面板 的 存储 厅 中 ) 因此 ， 当 实现 该 功 
能 时 还 请 记 住 上 述 这 一 点 。 这 个 例子 非常 好 ， 因 为 它 说 明 我 们 可 以 目 定义 拖 放 功能 的 一 些 动作 。 


首先 ， 我 们 需要 给 网 格 面板 和 树 形 面板 汪 加 拖 放 功 能 。 


在 Packt .view.mail .MailList 类 的 viewconfig 方 法 中 ， 我 们 需要 添加 以 下 代码 (在 
getRowCclass 困 数 之 前 或 之 后 ， 根据 个 人 意愿 ): 
plugins: { 
ptype: 'gridviewdragdrop', 


ddGroup: 'mailDD' 
} 


我 们 添加 了 一 个 拖 放 插件 ( Ext JS 的 原生 功能 )， 并 为 adGroup 属 性 设置 名 称 值 ，ddGroup 
属性 配置 项 表示 插件 作用 的 拖 放 区 域 "。 如 果 我 们 在 应 用 程序 里 实现 了 男 一 个 具有 不 同名 称 的 拖 
放 (区域 )， 无 法 实现 从 本 网 格 面板 ( 拖 放 区 域 ) 到 为 一 拖 放 区 域 的 拖 放 操作 。 


接 下 来 ， 在 Packt .view.mail.MailMenu 类 里 添加 以 下 代码 


viewConfig: { 
plugins: { 
ptype: 'treeviewdragdrop', 
ddGroup: 'mailDD', 
enableDrag: false 


} 


Q( 即 拖 放 操作 在 此 区 域 范围 内 有 效 。 一 一 译 者 注 
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我 们 还 实现 了 一 个 针对 树 形 面板 的 拖 放 插件 。 这 里 我 们 并 不 启用 拖 中 动作， 请 注意 本 例 的 
qdqcroup 属 性 配置 项 的 名 称 值 跟 网 格 面板 里 的 aqacroup 属 性 是 一 样 的 , 这 就 意味 着 网 格 面板 可 跟 
树 形 面板 进行 拖 放 操 作 。 

到 目前 ， 拖 放 还 未 实现 。 我 们 回 到 控制 器 来 实现 拖 放 程 序 逻 辑 。 

首先 ， 需 要 监听 树 形 面板 的 trzeeview 触 发 的 beforedrop 事 件 。 

由 于 表单 组 件 包 含 了 表单 基本 类 、 树 形 面板 包含 了 树 形 视图 (treeview ) 类 、 网 格 面板 包 
含 了 网 格 视图 (gridqview ) 类 。 因 此 ， 视 图 是 实际 负责 内 容 的 组 件 ， 网 格 或 树 是 包含 了 视图 并 
提供 其 他 功能 的 组 件 。 


"mailMenu treeview": { 
beforedrop: this.onBeforeDrop 


} 
下 面 的 代码 片段 实现 了 onBeforeDrop 方 法 : 


onBeforeDrop: function(node, data, overModel, dropPosition, dropHandler, options) { 
Ext .each (data.records, function(rec){ // #1 
rec.set('folder',overModel.get('text')); // #2 
. 
dropHandler.cancelDrop();// #3 


Var grid= Ext.ComponentQOuery.query('maillist')[0]; 
Var store = grid.getStore(); 
store.sync (); // #4 


} 


在 data 参 数 中 ， 可 以 发 现 有 个 records 属 性 ， 该 属性 包含 了 拖 忠 到 树 节 点 的 记录 。 因 此 我 
们 需要 循环 处 理 所 有 的 记录 (#1 )。 

这 个 “处 理 ” 是 指 改变 模型 中 的 foldezr 字 段 。 记 住 ,， 我 们 并 不 需要 从 网 格 面板 上 移 除 记 录 ， 
只 需 把 电子 邮件 从 一 个 文件 夹 里 归 到 另 一 个 文件 夹 里 即 可 《〈 雹 ， 改 变 邮件 所 属 文件 夹 )。 要 获取 
记录 拖 放 至 的 廊 点 的 名 称 ， 我 们 可 以 通过 overModel 参 数 获取 ( overModel. get ) 需要 的 字段 。 


记 住 ,不知 要 在 树 形 面板 中 妃 加 新 证 点， 我们 只 是 想 更 改 被 拖 蝶 模 型 的 folger 子 段 (把 邮 
件 记录 归 人 至 新 的 folger 中 )。 因 此 ,可 以 取消 被 触发 的 放 入 ( arop ) 事件 〈 始 ) 要 达成 此 目的 ， 
我 们 可 以 使 用 daropHandler 参 数 ， 该 参数 包含 了 完成 或 取消 数据 传输 操作 的 方法 ( 不管 是 从 源 
视图 的 存储 融 移 动 还 是 复制 模型 实例 到 目标 视图 的 存储 休 )。 


之 后 ， 调 用 网 格 面板 存储 带 的 sync 方 法 ， 在 数据 库 中 保存 邮件 所 属 新 文件 夹 的 名 称 (#4 )。 
从 网 格 面板 拖 蝶 邮件 到 树 形 面板 的 操作 如 下 图 所 示 : 
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现在 我 们 来 实现 最 后 部 分 的 窗 体 功能 , 用 户 可 以 在 这 里 撰写 要 发 送 的 新 邮件 。 编 码 之 前 , 来 
看 一 下 本 市 代码 实现 的 效 末 图 : 


La Untitled - Messnge 本 


Send | Gave br Show Ce Bec 
Ly kh [| 


To: 

Subject: 

山 Bdd,. 

| Tahoma 1BITIU|IAAA | 二 "于 证 于 过 情 | > 


首 完 ， 我 们 需要 创建 包含 撰写 新 邮件 表单 的 窗 体 : 


Ext .define('Packt.view.mail.NewMail', { 
extend: 'Ext.window.Window', 
alias: 'widget.newmail', 


height: 410, 
width: 670, 
autoShow: true, 
layout: { 
type: 'fit' 
}, 
title: 'Untitled - Message', 
iconCls: 'new-mail' 
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截至 当前 ,一切 都 很 顺利 。 我们 接 下 来 声明 dockedItems ,其 中 将 声明 一 个 带 有 Send (发送 )、 
Save (保存 )、Importance ( 高 优先 级 ) 以 及 Show Cc & Bcc (显示 抄 送 和 密 送 ) 等 按钮 的 工具 栏 。 


dockedItems: | 
{ 
xtype: 'toolbar', 
dock: 'top', 
items: I[ 
{ 
xtype: 'lbutton', 
text: 'Send', 
iconCls: 'send-mail', 
itemId: 'send' 


xtype: 'lbutton', 
text: 'Save', 
ijconCls: 'save'! 


xtype: 'tbseparator' 


xtype: 'lbutton', 
liconCls: 'importance,' 


xtype: 'tbseparator' 


xtype: 'lbutton', 

text: 'Show Cc & Bcc', 
lconCls: 'bcc', 
itemId: 'bcc'! 


] 


注意 ，importance 按 钮 没有 text 属 性 配置 项 。 


标 ， 因 此 只 需要 设置 conCclLs 属 性 配置 项 就 够 了 。 
现在 来 实现 表单 及 其 items 子 项 : 


items: [ 
{ 
xtype: 'form', 
frame: false, 
bodyPadding: 10, 
autoScroll: true, 
defaults: { 
anchor: '100%', 


text 属 性 是 可 选 的 。 由 于 我 们 


口 相 


A 人 ANNA 


显示 图 
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xtype: 'textfield' 
} 
items: | 
{ 
fieldLabel: 'To', 
name: 'to'! 


fieldLabel: 'Cc', // #1 
hidden: true, 
name: CC， 


fieldLabel: 'Bcc', // #2 
hidden: true, 
name: 'bcc' 


fieldLabel: 'Subject', 
name: 'subject' 


xtype: 'button', // #3 
text: 'Add...', 
iconCls: 'attach', 
itemId: 'attach' 


xtype: 'filefield', 
name: 'file' 


xtype: 'htmleditor', 

height: 168, 

style: 'background-color: white;', 
name: "Content ， 


] 


cc (#1 ) 和 Bcc (机) 字段 将 被 隐藏 ， 因 为 我 们 而 望 当 用 户 点 击 Show Ce & Bec 按钮 时 才 呈 
现 它们 。 


我 们 还 实现 了 一 个 Aqq ( 汪 加 ) 按钮 〈( 权 )， 以 便 用 户 可 以 在 电子 邮件 中 添加 一 个 新 附件 。 


9.6.1 动态 呈现 cc 和 和 Bcc 字段 


由 于 我 们 创建 了 一 个 按钮 来 呈现 cc 和 Bcc 字 段 , 因此 需要 在 控制 希 中 监听 按钮 触发 的 点 击 事 
件 。 用 户 点 击 该 按钮 时 ， 将 执行 以 下 方法 : 
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onShowBcc: function(button, e, options)t 
Ext .ComponentQuery.query('textfield[name=cc]'){[0].show(); 
Ext .ComponentOQOuery.query('textfield[name=bcc]'){[0].show(); 
} 


在 这 里 ,我们 唯一 要 做 的 就 是 获取 这 两 个 字段 的 引用 ， 并 调用 show 方 法 。 
输出 效 末 图 如 下 所 示 : 


9.6.2 ”动态 添加 文件 上 传 字段 
我 们 已 经 实现 了 Add 按 钮 ， 让 用 户 可 以 在 电子 邮件 中 活 加 新 附件 。 


因此 ， 当 用 户 点 击 Add 按 钮 时 ， 我 们 想 要 做 的 就 是 在 已 有 的 文件 上 传 ( fileUpload ) 字段 
后 面 ， 添 加 一 个 新 的 文件 上 传 类 。 我 们 在 控制 硕 里 实现 该 方法 : 


onNewAttach: function(button, e, options)t 
Var form = button.up('window') .down('form'); 


Var fileUpload = { 
xtype: 'filefield', 
name: 'file' + this.attachPosition // #1 


上 7 


form.insert (this.attachpPposition++, fileUpload); // #2 
} 


以 上 代码 中 有 两 点 需要 注意 。 第 一 点 是 新 建文 件 上 传 字段 的 名 称 。 已 生成 的 文件 上 传 字段 已 
经 有 了 和 名称 file， 因 此 网 不 能 重 名 了 。 我 们 回顾 一 下 ，name《〈 和 名 称 ) 属性 是 发 送 至 服务 大 端的 
参数 的 名 称 。 同 时 ,用 户 可 以 按 需 添加 多 个 新 附件 。 因 此 ， 得 想 一 个 办 法 为 每 个 文件 上 传 组 件 创 
建 唯一 的 名 称 (#1 ) 第 二 点 需要 关注 的 是 ， 我 们 需要 在 控制 项 里 创建 一 个 新 属性 ， 同 时 把 新 建 
文件 上 传 字段 的 插入 位 置 赋值 给 该 属性 〈 埠 )。 新 建文 件 上 传 字段 将 被 插 到 已 生成 的 初始 文件 上 
传 字 段 之 后 、HTML 编 辑 带 《htmledqitor ) 字段 之 前 ， 因 此 ， 如 采 算 一 算 ， 新 建文 件 上 传 字段 
的 插入 位 置 应 该 是 6: 


attachpPposition: 6 
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另外 , 每 当 用 户 新 加 一 个 文件 上 传 字 段 我 们 都 需要 递增 插入 位 置 值 (this .attachPosit- 


ijon++ )。 
当 用 户 关 闭 撰 写 新 邮件 窗 体 并 再 次 打开 它 时 ， 我 们 需要 重 将 attachPosition 值 设 为 6: 


onNewMessage: function(button, e, options)t 
Ext .create('Packt .view.mail.NewMail');} 
this.attachPosition = 6; 


} 


如 果 执 行 现 有 代码 并 点 击 Add 按 钮 ， 新 建文 件 上 传 字 段 将 被 搬入 到 撰写 新 邮件 表单 中 ,并 且 
用 户 可 以 添加 新 附件 ， 歼 末 图 如 下 所 示 【〈 添 加 了 三 个 新 字段 ): 


0 Add.. 
C:\fakepath\DSCN2447.JPG 


Cfarepath\DSCNe445.JPe 


Cfamepath\DSCN2316.JPt 


Cfavepath\DstCN2264.JPeo 


9.7 小 结 

本 曹 实现 了 一 个 与 Outlook 电 子 邮 件 客户 问 软 件 非 第 相似 的 电子 邮件 客户 端 模 块 。 这 说 明 我 
们 可 以 用 Ext JS ( 其 非 第 灵活 ) 来 干 很 多 深 忱 的 事 儿 ; 我 们 只 需要 天 注 一 些 细节 就 可 以 了 。 

此 外 ， 我 们 还 在 网 格 面板 和 树 形 面 板 之 间 实 现 了 拖 放 能 力 ， 并 进行 了 一 些 目 定义 开发 。 


到 本 章 为 止 , 我 们 就 完成 了 应 用 程序 的 所 有 功能 。 下 一 章 , 我 们 将 学 习 如 何 自 定义 应 用 程序 
的 外 观 ( 创建 一 个 新 的 主题 )， 并 阐述 如 何 优化 程序 并 做 好 产品 化 准备 。 


产品 化 准备 


截至 当前 , 应 用 程序 的 所 有 功能 都 完成 了 。 现在 我 们 来 创建 个 深 腕 的 主题 , 突出 应 用 程序 的 
个 性 化 风格 ,并 为 产品 发 布 做 些 准备 工作 。 毕 苋 我 们 所 有 的 工作 都 是 在 开发 环境 下 进行 的 ， 当 产 
品 要 发 布 上 线 时 ,不 能 价 单 地 部 车 所 有 文件 就 完事 了 ， 还 需要 提前 做 一 些 准备 工作 。 因 此 ,本 章 
主要 包括 以 下 内 容 : 


口 创建 目 定 义 主题 ; 
口 为 产品 发 布 打 包 应 用 ; 
口 使 用 Sencha Desktop Packager ( 桌面 打包 工具 )。 


10.1 开始 之 前 


本 章 使 用 的 主要 工具 是 Sencha Cmd ( Sencha 命 令 行 工 具 )。 通 过 此 工具 我 们 可 以 创建 自 定 义 
主题 ， 并 进行 产品 构造 。 由 于 我 们 使 用 Ext JS 4.2， 因 此 应 该 选择 Sencha Cmd 3.1.1， 它 兼容 Ext JS 
4.2。 我 们 始终 要 确保 使 用 的 Sencha Cmd 有 版 本 与 Ext JS 版 本 兼容 。 


目前 为 止 ， 本 书 已 经 完成 了 如 下 开发 内 容 : 


I) masteringextjs 


[3 国 四 jj | 至 "| EINE 2 


乓 | app 
| app.json 
名 bootstrap.css 
外 bootstrap.js 
| build.xml 
bp 各] ext 
® index.html 
» MN overrides 
» | packages 


FAVORITES 


SHARED 


> 上 php 

生 Readme.md 
上 BN resources 
> 站 Sass 
# BN translations 


> 的 ux 
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我 们 开发 的 所 有 代码 都 在 app 目 录 、index.html 文 件 、php 目 录 、resources 目 录 ( CSS 文件 及 日 
定义 图 片 图 标 文件 )、translations 目 录 以 及 ux 目录 (项 目 中 用 到 的 第 三 方 插件 ) 里 。 通 过 Sencha Cmd 
创建 的 其 他 目录 和 文件 ， 我 们 都 已 在 第 一 章 了 解 到 。 


10.2” 自 定义 主题 

本 章 要 做 的 第 一 件 事 就 是 自 定义 一 个 应 用 主题 ， 我 们 需要 通过 Sencha Cmd 和 操作 系统 的 终 
端 应 用 程序 来 完成 它 。 

Ext JS 4.2 提 供 了 一 个 与 之 前 Bxt JS 4 版 本 不 同 的 新 的 自 定义 主题 方式 ， 根 据 创建 全 新 主题 所 
需 ,Sencha Cmd 现 在 已 具备 生成 相应 完整 文件 结构 的 能 力 。 我 们 接 下 来 介绍 这 个 新 的 自 定义 主题 
方式 。 

我 们 一 步 步 地 创建 这 个 新 主题 。 首 先 ,打开 终 端 应 用 程序 ,将 目录 切换 到 项 目 根 目录 ， 然 后 
执行 以 下 命令 : 


sencha generate theme masteringextjs-theme 


[masteringextjs — bash — 80x24 


loiane:- Loianes$s cd /App .ications/XAM?PYxamppiiles/htdocs/nasteringext]s 
loiane:nasteringext]s loianed sencha Jenerate theme masteringext]s-thems 
Sencha Cmd v.16:256 

[ LMF] 

[INF] init=gLuygin: 

【IF] 

[INF] init=pLlugin: 

[TIMNF] Invoking plugin (Applications/KAMPP /xanrppfilcs/ntdocs/ /misttringentj sr . sen 
charapp/plugin.xml) 一 supported targets: -beftcre-generate—theme 

LTMEF] 

[INF] ~before-generate—-theme: 

[INF] Invoking plugin (AApplications/WAMPP /ranrppfiles/ntdocs/masteringextijs. Sen 
charapp/plugin.xml) -= supported targets: generate-thems 

[LINF] 

[TINF] cend=reot=—plugin, init-properties: 

[LINF] 

[LINF] init—=properties: 

[LIMNF] 

[ENFT init sencha command: 

LINEF] 

[TNFY] init: 

[LMF] 

[INF] ~before=generate-theme: 

[INF] 


我 们 的 主题 名 称 为 nasteringextjs-theme。 这 条 命令 将 在 packages 文 件 夹 里 创建 一 个 新 的 
目录 ， 目 录 名 与 主题 名 称 相同 (masteringextjs-theme )， 如 下 图 所 示 : 
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国 packages 
[BE [于 1 四 | | 村 ;| 


FAVORITES sme 
bE | ext-theme=neptune 
EF 上 ext-theme-neutral 
T Ml masteringextjs-theme 
| build.xmil 
be 和 训 | docs 
hb | licenses 
bk | overrides 
| package.json 
| Readme.md 
|] resources 
息 | sass 
.SF 


package.json 文 件 包 含 了 一 些 Sencha Cmd 会 用 到 的 主题 配置 项 ,如 主题 名 称 、 版 本 以 及 依 
赖 关 系 等 。 


sass 目 录 里 包含 了 主题 所 需 的 所 有 Sass 文 件 。 在 这 个 目录 里 , 我 们 可 以 看 到 三 个 主要 的 目录 。 


sHARED 


口 var 包含 Sass 变 量 。 

D src 包含 Sass 规 则 和 混入 类 〈mixins )。 这 些 规则 和 混入 类 使 用 sass/var 目 录 文 件 里 声明 
的 变量 。 

D etc 包含 额外 的 实用 果 数 和 混入 类 


我 们 创建 的 所 有 文件 必须 匹配 样式 设计 对 应 组 件 的 类 路 径 。 比 如 想 设 计 按 钮 组 件 , 就 需要 在 
sass/varbutton/Button.scss 文 件 里 创建 其 样式 ;如 果 想 设计 面板 组 件 ， 就 应 该 在 sass/varpanel.scss 
文件 里 创建 其 样式 。 


resources 目 录 包 含 主 题 妥 用 到 的 图 片 及 其 他 静态 资源。 

overrides 日 录 包 含 了 所 有 用 于 和 窗 写 组 件 的 JavaScript 代 人 码 , 当 对 这 些 组 件 进行 目 定 义 主 题 时 可 

用 到 这 些 代码 。 

花 些 时 间 解 释 接 下 来 一 些 目录 的 内 容 ， 可 以 在 packages 文 件 夹 里 找到 我 们 更 熟悉 的 组 织 Sass 
文件 的 方式 : ext-theme-classic 、extrtheme-gray 以 及 ext-theme-neptune。 


默认 情形 下 ， 我 们 创建 的 主题 将 使 用 ext-theme-classic 文 件 (经典 的 Ext JS 蓝 色 主 题 ) 作为 基 
准 主题 。 我 们 可 以 尝试 一 下 Ext JS 4.2 新 的 Neptune 主 题 (代号 : 海神 )。 要 改变 基准 主题 ， 请 打开 
package.json 文 件 并 定位 到 extenda 属 性 。 将 属性 值 由 ext-theme-classic 更 改 为 
ext-theme-neptune。 package.] son 文 件 内 容 如 下 : 


{ 


"name": "masteringextjs-theme", 
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"type": "theme", 

"Creator": "anonymous", 
"version": "1.0.0", 
"compatVersion": "1.0.0", 
"local": true, 

"requires": [], 

"extend": "ext-theme-neptune" 


} 


创建 主题 结构 并 且 改 变 基 准 主题 之 后 ， 我 们 来 生成 主题 。 再 次 通过 终端 应 用 程序 和 Sencha 
Cmd 来 完成 此 步 又。 切换 目录 至 packages/masteringextjs-theme， 并 执行 以 下 命令 : 


sencha package build 


结果 如 下 图 所 示 : 


masteringextjs-theme 一 bash 一 80x24 


LoianeimasteringeExtjs Loiane$ cd packages/masteringextjs-theme 
loiane:i:masteringextjs-—theme loianes$ senmcha package build 

Sencha Cmd v3.1.8.256 

[INF)] 

[INF] init—p\lugin: 

[INF] 

[INF] init 一 plLuginm: 

[IINF] Invoking plugin (/Applications/XAMPP/xamppfiles/htdocs/masteringextjs/pack 
ages/masteringextis-theme/ .sencha/package/plugin.xml) - supported targets: 一 befo 
re-pkg—build 

[INF] 

[IINMF] -before-pkg-build: 

[TNFY Invoking plugin (J/Applications/XAMPP/xampptiles/htdocs/masteringextis/pack 
ages/masteringextjs-themex .sencha/package/plugin.xml) - supported targets: pkg-b 
U 主 1 可 

[INMF] 

[IIMF] cmd-root—plugin.init-properties: 

IINF] 

[INF] init-—-properties: 

[INF] 

[INF] init—sencha-command: 

[TNF] 

[INF] init: 

[INF]) 


该 命令 在 packages/masteringextjs-theme 文 件 夹 里 创建 了 build 目 录 ， 如 下 图 所 示 : 


国 masteringextjs-theme 


本 || | 全 || 类 -| 男 


FAWORITES 
SHARED 


Sass=-cCache 
zh config.rb 
=xample 
masteringextjs-theme-all-debug.scss 
masteringextjs-theme-all-rtl-debug.scss 
| masteringextjs-theme-debug.js 
:masteringextjs-theme-dey.js 
| masteringextjs-theme.js 
kb | resources 
| theme-capture.json 
| theme-captuyre.png 
| build.xmil 
bE 各 |] docs 
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build 文 件 夹 里 有 一 个 resources 目 录 ， 在 resources 目 录 里 我 们 可 以 找到 一 个 masteringextjs- 
theme-all.css 文 件 ， 该 文件 包含 了 在 我 们 的 上 自 定义 主题 ( 目前 还 没有 ， 后 续 会 实现 ) 中 进行 样式 
设计 的 所 有 组 件 的 所 有 样式 。 即 使 创建 了 一 个 完整 的 主题 (对 所 有 组 件 进行 样式 设计 )， 也 并 非 
一 定 会 在 应 用 程序 中 用 到 所 有 的 组 件 。Sencha Cmd 能 够 帮 我 们 过 滤 并 创建 一 个 CSS 文 件 ， 其 中 内 
包含 需要 用 到 的 组 件 。 因 此 , 我 们 不 需要 在 应 用 程序 中 手动 包含 masteringextjs-theme-all.css 文 件 。 


现在 ,我 们 对 项 目 进行 相关 设置 ,使 其 能 够 应 用 目 定 义 主题 。 在 项 目 文件 夹 中 ， 有 一 个 隐藏 
的 文件 夹 叫 .sencha， 在 这 个 文件 夹 里 ， 有 一 个 app 文 件 夹 及 一 个 sencha.cfg 文 件 ， 如 下 图 所 示 : 


masteringextjs 
El = ENEN QO || 交 "| » 


ga 

on 
FAVORITES Eee 

.Sencha 


SHARED 
Y | app 


| build-impl,xml 
中 build.properties 
| codegen.json 
1 plugin.xml 
四 sencha.cfg 
bp [workspace 
>» 加 app 
an 


文件 里 包含 了 Sencha Cmd 用 到 的 项 目 属性 配置 ， 因 此 更 改 这 些 配 置 项 时 一 定 要 小 心 。 定 位 到 
app .theme 属 性 ， 并 更 改 其 值 为 我 们 创建 的 主题 名 称 (masteringextjs-theme )， 如 下 图 所 示 : 


# The name of the package containing the theme scss for the app 


app. theme=smasteringext]s-theme 


接 下 来 需要 在 项 目 中 应 用 这 些 更 改 , 打开 终端 应 用 程序 , 进入 应 用 根 日 录 并 执行 以 下 两 条 命令 : 


sencha ant clean 
sencha app build 


如 果 我 们 试 着 在 浏览 锅 里 打开 应 用 程序 ， 将 发 现 应 用 程序 已 经 应 用 了 Neptune 主 题 : 


@e 国 Packt 


< @ | localhost/masteringextjs/ 立 | 区 三 


C 
2 clo 
$ Categories 1 PE... GUINESS 2006-02-15 04:3..，@ 
昼 Languages 2 NICK WAHLBERG 200602-15 04:3.， 加 
- 斩 Cities 3 ED CHASE 2006-02-1504:3..， 回 
总 Countries 4 JE... DAVIS 200602.15 04:3..， 和 辐 
E 5 JO... LOLLOBRIGIDA 2006-02-1504:3... @ 
园 Content Manag... € 
6 BE... NICHOLSON 2006.02.15 04:3.， 回 
> Reports 7 G.. MOSTEL 2006-02-1504:3... 人 @ 
a ,IOHANSSON 20086-02-1504:3... 全 
FA MallCllent Nothing Fourd 
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不 过 ， 到 目前 为 止 仍 没有 什么 改变 。 让 我 们 马上 开始 日 定义 主题 吧 ! 先 回 到 packages/mas- 
teringextjs-theme 文 件 夹 , 在 sass/var 文 件 夹 里 创建 一 个 新 文件 Component.scss, 为 其 添加 以 下 内 容 : 


Sbase-color: #317040 !default; 


我 们 通过 这 行 代 人 码 声 明了 一 个 名 为 sbase-color 的 Sass 变 量 ， 其 值 为 绿色 十 六 进 制 颜 色 码 
(#317040 ), 该 设置 把 主题 的 基本 颜色 由 原先 的 蓝 色 更 改 为 绿色 。 我 们 来 应 用 一 下 这 个 更 改 看 看 
效果 如 何 。 


打开 终端 应 用 程序 ， 进 入 packages/masteringextjs-theme 目 录 ， 执 行 以 下 命令 : 


sencha package build 
之 后 ， 切 换 到 项 目 根 目录 下 ， 并 执行 以 下 命令 
sencha app build 


打开 浏览 器 ， 显 示 效 果 如 下 图 所 示 : 


人 日 日 园 packt x \ = 


所 SS || localhost/masteringextjs/ yy 区 三 


BO Add 局 SaveChanges ”四 CancelChanges 六 Ciear Filters 
司 Static Data 机 Search < > Regular expression 
szActors Actor Id First| Last Name 
“全 categories 1 PE... GUINESS 2006.02.15 04:3..， 辐 
“加 Languages 2 NICK WAHLBERG 2006-02-15 04:3..， 刁 
- 训 Ciies 3 ED CHASE 2006-02-15 04:3...@ 
转 countries 4 JE... DAVIS 2006-02-15 04:3... 日 
RE 5 JO... LOLLOBRIGIDA 2006-02-15 04:3..， 国 
6 BE...” NICHOLSON 2006-02-15 04:3..， 国 
> Reports + G... MOSTEL 2006-02-15 04:3..，@ 
R MJOHANSSON 20086-02-1504:3... 辐 
ED MaliClient 十 Noihing Found 


我 们 可 以 继 绥 为 目 定 义 主 题 谎 加 更 多 的 样式 。 不 管 我 们 做 了 什么 改变 并 硕 望 看 到 何 种 效 末 ， 
都 需要 按照 前 面 的 做 法 ， 执行 sencha package build 和 sencha app bui1q 这 两 条 命令 。 


Ext JS 4.2 与 Ext JS 4 早期 版 本 在 生成 日 定义 主题 方面 有 着 很 大 的 差异 。 之 前 的 版 本 里 ， 我 们 
会 使 用 Compass 编 译 (compass compile )， 并 且 手 工 处 理 文 件 的 所 有 创建 及 编译 工作 。 现 在 ， 
Sencha Cmd 已 能 够 帮 我 们 做 这 些 事 情 ， 我 们 只 需 肾 焦 在 希望 创建 的 Sass 样 式 代码 上 。 但 是 ， 新 
方式 比 老 方式 更 耗 时 。 
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Ext JS 文 档 非 常 完整 。 如 果 你 想 目 定义 一 个 特定 的 组 件 ， 你 可 以 在 文档 中 找到 所 有 sass 的 
CSS 变 量 以 及 组 件 使 用 的 CSS 混 入 类 


Ext.button.Button xawpe:butta 


洲 Confiigs 3 琶 Properies 3 沽 Wethods1 2 Events 37 


extjs/4.2.0/#!/guide/theming。 同 时 ,强烈 建 议 大 家 掌握 Sass ( http://sass-lang.com/ ) 


若 希 望 了 解 更 多 关于 Ext JS 应 用 主题 的 信息 , 请 访问 : http://docs.sencha.com/ 
和 Compass ( http://compass-style.org/ )。 


10.3 为 产品 发 布 打包 应 用 


我 们 将 主题 创建 好 了 。 现在 剩 下 的 唯一 工作 就 是 构造 产品 并 将 其 发 布 到 生产 环境 的 Web 服 务 
器 上 上。 我们 依旧 通过 Sencha Cmd 来 完成 这 件 工 作 。 


打开 终端 应 用 程序 ， 切换 至 应 用 系 E 根 目录 并 执行 以 下 命 命令 : 


sencha app build 


辐 mastaringextjs 一 bash — 80x24 


loiane:~ loianes$ cod Fhpplications/XAMPP /xamppfiles/htdocs/masteringextijs 
loiane:masteringextijs toianes$ sencha app build 

号 囊 由 Cha Cm 十 玉 . 卫 .向 .车 后 

[ZNF] Ineluding theme package masteringextis-theme for app.theme=smasteringextis-— 
theme build 

LENEF] 

[INF] init—-plugin: 

LENF] 

[TINF] tnit=pluain: 

[INF] Invoking plugin lI/Applications/XAMPP/xamppfiles/htdocs/masteringextijs. sen 
cha/app/plugin.xml) ~— supported targetss: -before~app—-build 

[LINEF] 

[INF] ~before-app—-byuild: 

[INF] Invoking pluginm (yApplicationsy/ XAMPP /xampptiles/htdocs/masteringextis,. sen 
cha/app/plugin. xml) — supported targets: app-buitd 

[INE] 

[INF] cmd=root-plyugin,.init-properties: 

LINEF] 

[INF] init—properties: 

LINEF] 

[iINF] init-sencha=-command: 

[LINEF] 

[INE] jinit: 

LINEF] 


日 命令 执行 完毕 ， 将 创建 一 个 新 目录 build/NameofTheApp/production。 由 于 我 们 的 应 用 程 
序 命名 空间 为 Packt， 所 以 创建 的 目录 就 是 build/Packt/production， 如 下 图 所 示 : 
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国 masteringextjs 
| = EEN Ea.240> 


FAVOQRITES 


BB em 
:看 | app 

| app.json 

时 bootstrap.css 

2| bootstrap.js 
曾 build 
| 


SHARED 


国 masteringextjs-theme 
国王 cl 
Ta 
.Sa55—CaChe 
2 all-classes.js 
让 config.rb 
index. html 
| Packt—all.scss 
| Packt-example.scss 
国 resources 
| theme=capture.json 
| thame-captuyre.png 
| build.xmil 


这 条 命令 的 作用 是 获取 我 们 开发 的 所 有 代码 (app 目录 中 ) 以 及 应 用 程序 所 需 的 相关 Ext JS 
代码 ， 并 将 其 放 和 人 all-classes.js 文 件 中 。 之 后 , 通过 YUI Compressor 工 具 (YUI 上 压缩 工具 )，Sencha 
Cmd 压 缩 并 混 消 JavaScript 代 三 ; 这 样 用 户 就 只 需 加 载 非 常 小 的 JavaScript 代 码 。 另 外 ,Sencha Cmd 
将 鉴别 应 用 程序 使 用 到 的 组 件 , 过 滤 挥 不 需要 的 CSS 样 式 设置 , 放 在 resources/Packt-all.css 文 件 里 。 
我 们 所 有 的 目 定 义 图 标 也 将 从 开发 环境 复制 到 生产 文件 夹 中 ( 同样 放 在 resources 文 件 炎 中 )。 


接 下 来 要 确保 产品 构造 能 如 预期 一 样 正和 党 工作。 我 们 通过 http://localhost/masteringextjs 访 问 
开发 环境 ， 而 机 测试 产品 化 的 构造 效果 束 得 访问 http://localhost/masteringextjs/build/Packt/ 
production。 在 测试 过 程 中 会 发 现 结果 并 不 正常 ， 错 误 如 下 图 所 示 : 


个 和 | 9 9 国 Pac 


— | | localhost/masteringextjs/build/Packt/production/ py [和 


Elerrents Resources N etwrork SOUFCES Tirmelime Profiles Audits | Eansole | 


志 TUncaught ReferenceError: translations is not defined 


HL icClasses. ls:d 
lanonymous function) 


all-classes.15:B 


a top frame> | <page context> AI | Errors Wari 1 拌 


此 ， 痛 先 打 开 build/Packt/production/index.html 文 件 并 修改 它 。 我 们 需要 添加 语言 转换 文件 
以 及 app.css 文 件 ( 该 样式 文件 是 在 第 1 章 创 建 图 标 时 一 同 创建 的 )， 最 终 版 本 如 下 : 
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<1DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Packt</title> 
<link rel="stylesheet" href="resources/Packt-all.css"/> 
<link rel="stylesheet" href="resources/css/app.css"> 
<script src="translations/locale.js"></script> 
<script type="text/javascript" src="all-classes.js"></script> 
</head> 
<body></body> 
</html> 


接 下 来 复制 translations 文 件 夹 和 php 文 件 夹 到 production 文 件 夹 下 ， 如 下 图 所 示 : 


国 productian 


ee) ls) [oes% 
FAVORITES | 
:S5955—Cache 

| all=classes.js 
中 config.rb 
而 


SHARED 


index.htmil 
| Packt-all.scss 
| Packt-example.scss 


| 国 resources 
| theme-capture.json 
| theme=captyure.png 
b Bm translations 


再 次 测试 ， 结 果 就 正常 了 。 


10.3.1 发 布 成 产品 的 内 容 


别 筷 了 我 们 的 app 文 件 夹 以 及 所 有 代码 都 是 在 开发 环境 中 创建 开发 的 。 产 品 文件 夹 中 所 有 的 
这 些 开 发 代码 净 要 发 布 成 产品 代码。 


那么 现在 就 来 发 布 应 用 程序 吧 。 先 把 masteringextjs/build/Packt/production 的 内 容 移 到 Web 服 
务 硕 的 文件 夹 下 ， 如 下 网 所 示 : 


| Disconnect Edit Abort Log/Queue Tools Help 
| /Applications/XAMPP/htdocs /masteringextjs/bu v| Browse | 到 凤 /public_html/masteringextjs | Change 
| Size Type 3 | Size Type Date 国 


[resources 
translations 
El all-classes.js 1,330 KB js 


zh config.rb 1 KB 
» index.html 1 KB 
: | | Packt-all.scss 39 KB 
: 了 Packt-exarmple.scss a0 KB 
theme-capture.json 41 KB json 
: 四 theme-capture.png 237 KB png 
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10.3.2 产品 化 的 优点 


产品 化 的 好 处 是 什么 ?我 们 能 只 发 布 开发 代码 吗 ? 可 以 把 开发 代码 当成 产品 代码 来 发 布 ,但 
我 们 不 推荐 这 种 方式 。 通 过 产品 化 构造 过 程 ， 文 件 被 压缩 了 ， 加 载 文 件 时 的 性 能 就 会 提高 。 


比如 ， 我 们 来 做 个 测试 : 在 浏览 锅 里 打开 应 用 程序 ， 登 录 ， 人 然后 打开 静态 数据 醒 块 的 Actors 
(演员 ) 界面 。 


在 Google Developer Tools (或 Firebug ) 中 可 以 看 到 开发 代码 的 输出 结果 ， 如 下 图 所 示 : 


Elements Resources | Network | Sources Timeline Profiles Audits Console 


Status | Size 
Method Text Type Initiator Cg 


GET SUCCeSs5 image/gif rit (from cache) 


p _ ext-dev.js:22614 
GET Success image/gif Script (from cache) 


®@ © CO | Documents Stylesheets Images Scripts XHR Fonts WebSockets QOther 


应 用 程序 产生 了 911 个 请 求 ， 花 费 13.92 秒 将 4.8 M 的 结果 数据 传 给 用 户 。 这 数据 太 大 了 ， 要 
传 4.8 M 的 数据 给 用 户 显然 无 法 令 人 接受 。 


来 看 看 产品 构造 后 的 结 末 : 


Elements Resources | Network | Sources Timeline Profiles Audits Console 


‘Status 


p Size Time 
Text Type Initiator 


Content Latency 


—— rg 一 , 一 一 一 一 -一 一 一 r= 
5 from cach 
| UCCess image/gif Seript (from cache) 


0 
| :i if; 人 all-classes.is:1 : 0 
” iter otis SUCCESS image/gif Script (from cache) 8 


450 requests | 87.9 KB transferred | 32.09s (onload: 566 ms, DOMContentLoaded: 566 ms) 
[ 加 是 | IT | Documents Stylesheets Images Scripts XHR Fonts © ~ ~ Other 


应 用 程序 产生 了 450 个 请 求 ( 依然 很 大 ) 以 及 87.9 KB 的 传输 量 。450 个 请 求 数 仍 比 较 大 ， 这 
是 因为 我 们 要 呈现 大 量 图 标 。 在 第 12 章 里 ,我 们 将 学 到 怎样 借助 其 他 工具 的 帮助 来 降低 这 个 数量 。 
但 现在 最 重要 的 改变 是 传输 数据 量 的 大 小 ， 从 4.8 M 变 为 了 87.6KB ， 这 是 多 么 大 的 一 个 提升 啊 ! 


为 一 个 需要 的 关注 的 是 已 加 载 的 文件 ,在 开发 环境 中 , 可 以 看 到 被 浏览 融 加 载 的 每 个 Ext JS 类 


EL Elements Resources | Network | Sources Timeline Profiles Audits Console 


2 Size Time . 
Method Initiator Contant Latency Timeline 


| Layout.js? dc=1367890291845 ext-dev.js:10412 20.3 KB 944ms 
E A , CET applicatio... : 
= /masteringextis/ext/src/layout Script 19.9 KB 797 ms 


=| ElementContainer.js? dc=136789029 Et 把 交 ext-dev.is:10412 11.1 KB 943 ms 
=| /masteringextjs/ext/src/util -pple Script 10.8 KB 807 ms 


-| None.js? dc=1367890292082 2 ext-dev.is:10412 4.0 KB 5641 ms 
出 玉 ， |GET applicatio... = 
/masteringextjs/ext/src/layout/contair Script 3.7KB 583mns 


=| Menu.js? dc=1367890292083 CE et ext-dev.is:10412 15.1 KB 715 ms 
三 /rmasteringextjs/ext/src/layout/contair Re Script 14.7 KB 644 ms 


光 是 演 染 登录 界面 就 有 400 多 个 JavaScript 文 件 被 加 载 。 
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接 下 来 观察 一 下 产品 构造 后 的 情况 : 


Elements Resources | Network | Sources Timeline Profiles Audits Console 


Size Time 


Status ifi 
Method Te Type Initiator Content Latency 


xt Timeline 
locale.js 200 et localhost:8 712B 
S re GET FA applicatio... ? 了 
[masteringextijs/build/Packt/productio OK Parser 335B 


all-classes.js 304 和 localhost:8 263B 
CET .applicatio... 


= /masteringextis/build /Packt/productiol Not Moditiec Parser 1.3 MB 


| en.js 304 locale.js:5 285B 
S GET applicatio... 2 


| 1 下 ~ 
| /masteringextijs/build/Packt/productio Not Moditiec Script 7938 


| ext-lang-en.js 200 pe locale.is:6 11.1 KB 
JS ， CET | applicatio... 0 
= /masteringextjs/build/Packt/productio OK Script i190.7 KB 


只 有 4 个 JavaScript 文 件 被 加载， 差别 实在 太 大 本 ! 


此 ,出 于 性 能 的 考虑 ， 应 该 始终 构造 并 发 布 产 品 。 开 发 代码 只 是 用 于 开发 目的 。 力 外， 还 
可 能 出 于 测试 目的 实现 测试 构造 ， 我 们 将 在 第 12 章 进一步 讨论 这 个 话题 。 


10.4 从 Web 到 果 面 : Sencha Desktop Packager 


对 Ext JS 开发 专家 而 言 ， 产 品 部 署 就 是 意味 着 发 布 Ext JS 代码 和 服务 硕 端 代码 到 Web 服 务 带 
上 ;至 于 使 用 PHP、Java、.NET、Ruby 或 其 他 何 种 语言 都 没有 问题 。 所 有 代码 一 一 前 端 ( ExtJS ) 
代码 和 后 端 (如 PHP ) 代码 ， 都 需要 发 布 到 Web 服 务 器 上 。 


但 还 有 一 种 发 布 Ext JS 代码 给 用 户 的 方式 : 发 布 成 桌面 应 用 程序 。 本 书 并 不 讨论 使 用 Java 桌 
面 开 发 技术 ( 比如 Swing ) 或 C/C++ 技术 开发 项 目 , 我 们 只 讨论 用 HTML 、CSS 和 JavaScript 开 发 原 
生 应 用 (Mac OS、Linux 和 Windows 上 )， 当 然 ， 使 用 的 是 我 们 喜欢 的 框架 一 一 Ext JS 。 


市 面 上 有 一 些 工具 能 够 帮助 我 们 构建 Ext JS 早 面 应 用 程序 ， 但 本 书 将 介绍 Sencha 的 为 一 个 工 
具 Sencha Desktop Packager。Sencha Desktop Packager 是 Sencha 的 付费 工具 ， 但 可 以 下 载 并 体 
验 一 下 其 试用 版 本 。 下 载 地 址 为 http://www.sencha.com/products/desktop-packager/。 


接 下 来 实现 部 署 在 Mac OS、Linux 以 及 Windows 平 台 上 的 应 用 程序 原生 桌面 版 本 。 另 外 ,我 
们 还 需要 知道 Sencha Desktop Packager 能 和 否 满足 生成 应 用 代码 包 的 需要 ， 以 及 是 否 还 需 做 些 额 外 
的 工作 。 下 面 ， 我 们 一 步 步 来 完成 这 些 工 作 。 


10.4.1 安装 Sencha Desktop Packager 
下 载 Sencha Desktop Packager 并 解压 到 我 们 选择 的 目录 中 。 
下 一 步 添 加 Sencha Desktop Packager 到 操作 系统 的 PATH (路径 ) 环境 变量 中 。 
1. Mac OS 和 Linux 操 作 系 统 
在 Mac OS 和 Linux 操 作 系 统 中 ， 可 以 通过 终端 应 用 程序 来 完成 此 操作 。 假 设 我 们 使 用 
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/Users/loiane/bin/Sencha/SenchaDesktopPackager 作 为 Sencha Desktop Packager 的 目录 。 


要 设置 PATH， 只 需 使 用 下 面 这 条 命令 : 
export PATH=$PATH: /Users/loiane/bin/Sencha/SenchaDesktopPackager 


之 后 ， 我 们 可 以 打印 出 PATH 变 量 (echo S$PATH ) 以 检查 PATH 是 否 设置 成 功 。 最 后 ， 通 过 
ionpackage 命 令 测 试 是 否 安装 正常 : 


们 laiana 一 bash 一 83x24 


loiane:~ loiane$ export PATH=#PATH: /Users/loliane/bin/Sencha/:SenchaDesktopPackagar 
loiane:~ loianes$ echo $PATH 
:Users/loiane/bin/Sencha/cmd/3.1.8.256: Users/ lciane/bin/Senchar md/3.1.8.138: /ser 
srlolanerbinsenchartmd/ 3.8.8.2358: Usr ain: /bin A usrisbin: /sbin: /Usri localrbln: usr 
X11ljbin: /usrilocal/gitybin:/Users/ loliane/bin/Sencha/SsenchaDesktopPackager 

loiane:~ loianes$ ionpackage 

Sencha Desktop Packager 1.1.1.398 


Usage: ionpackaga [options] configFile.json 


Dpticns: 


——-dclivale AcLlivale a Tultl License, 

——GWwerwrite Force overwriting tne target path (if it already exists). 
——Version Show the version, 

一 or —help Display this usage. 


Fnr nnre infn-mat inn, see the dnrumentatinn. 


loiane:~ loiane 国 


2. Windows 操 作 系 统 


如 果 使 用 Windows 操 作 系 统 ， 就 需要 通过 男 一 种 方式 设置 环境 变量 。 我 们 用 
C:/SenchaDesktopPackager 作 为 Sencha Desktop Packager 的 目录 。 下 图 使 用 的 是 Windows 8 操作 系 
统 ， 但 步骤 跟 在 Windows 7 中 是 一 样 的 ，Windows XP 也 类 似 。 


定位 到 计算 机 的 网 标 Computer， 右 击 选择 Properties〈 属性 ): 


cle BBIm 


: 仿 Network | 团 Manage 
Dpen in new window 
Pin to Start 
ap network drive... 
Disconnect network drrve,.. 


Add a network location 


Delete 


Renarme 


Properties 
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点 击 Advanced system settings ( 高 级 系统 设置 ): 


pe | : 
(€)3) 二 总 | 喇 ， Controlpanel System and Security bk System search Eo, A 
全 | 


Control Panel Home Pe . 
View basic Information about your computer 


加 pe et Windows edition 


[| Remote settings Windows 8 Release Preview 


国 国 \A 
世 System protection 局 2012 Microsoft Corporation, All rights WI 门 d OW C _ 8 
| 而 Advanced system settings reserved, EE 4 
= 二 Get more features with a nevw editron of 
Windovws 


Rating: System rating ts not avallable 

Processor: InteltRY) CorelThD 15-2400 CPU 莒 3.106Hz 3,106Hz 
Performance Information and | 
Ta Installed memory [RAN 100 BE 


SeEEAdlso 
Action Center 
Windows Update 


点 击 Environment Variables.… ( 环境 变 


He 


| Computer Name | Hardware | Mvanced | System Protection | Remote | P 
You must be logged on as an Administrator to make most of these changes. 
Pearmance 


Desktop settings related to ¥our sign-in 


Startup and Recovery 


在 System variables( 系统 变量 ) 框 里 ， 定 位 到 Path 并 点 击 Edit...( 编辑 ): 
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Value 


C:\Program FllesWavaydkl.7.0_ 13 
C:Ruby193\bin 

YoPATHEXT Yb; ,RB;.RBW 
%USERPROFILE% AppDatalocal\Temp_ 


New,,， Edit,.. Delete 


.COM;.EXE;.BAT;.CMD;.VBS;. VBE; .3S;.,,., 
x86 


打开 终端 应 用 程序 ， 敲 和 人 ionpackage 命 令 测试 安装 是 否 成 功 ， 如 下 图 所 示 : 


Microsoft Windows [Uersion 6.2.8400] 
《Cc> 2012 Microsoft Corporation. hll rights reserved. 


C:\Users\Loiane>ionpackage 
AI 3 i WP Wh 


Usage : ionpackage [options] conf igFile.json 


Options: 

| 一 一 actiuate Activate a full license. 

| -一 DuUekFwhite Force overwriting the target path Cif it already exists>-。 
mm Show the version. 
-hh or ——help Displav this usadge. 


For more information,. see the documentation. 


CGC:\Users\Loiane>, 
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这 样 ，Sencha Desktop Packager 就 安装 完成 了 ! 
10.4.2 ”应 用 打包 


任务 之 一 是 产品 部 莹 准备 ， 前 面 我 们 已 经 完成 了 。 
在 项 目 文 件 夹 中 ， 我们 需要 创建 一 个 包含 配置 信息 的 JSON 格 式 新 文件 desktoppackager.json: 


{ 
"applicationName" : "Mastering Ext JS", 
"applicationIconPaths" : ["HelloWorld.ico", "HelloWorld.icns"], 
"versionString" : “10"., 
"outputpPpath" : "build/Packt/package/", 
"webAppPath" : "build/Packt/production/", 
"settings" : { 
"mainWindow" : { 
"autoShow" : true 
} 
) 
】 


还 需要 一 个 图 标 用 以 表示 应 用 程序 。 我 们 使 用 HelloWorld 示 例 的 HelloWorld.icns 和 
HelloWorld.ico 图 标 ， 可 以 在 Sencha Desktop Packager 的 示例 文件 夹 中 找到 它们 。 


添加 三 个 新 文件 之 后 ,我们 的 应 用 程序 如 下 图 所 示 ; 


er masteringextis 
ums) [®tr) 


医 .SEMcna 
SHARED 有 全 an 
| app.json 
bootstrap.css 
bootstrap.js 
kb 和 让] buiid 
了 build.xml 
| 驮 desktoppackager,json 
| 攻 和 看 | ext 
HelloWorld.lens 
HellowWorld.ico 
index.html 
E | overridas 
b | packages 
=- 乓 | php 
Bl Readme.md 
b | resources 
EE 让 | 5055 
es | translations 


让 | ux 


FAVYORITES 
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之 后 ， 打 开 终 端 应 用 程序 ， 切 换 到 应 用 程序 目录 ， 并 执行 以 下 命令 : 
ionpackage desktoppackager .json 


输出 效果 如 下 图 所 示 : 


BE masteringextjs 一 bash 一 B80x19 


lojane:~ loianes$ cd /Applicationsy XiMPP /xamppfilesyhtdocsymasteringext]is 
loliane:masteringext]s loianes$ ionpackage desktoppackager,]son 

一 一 License is Wwalid 

Packing from contiguration file desktoppackager:] oon. 
Searching Tor files. Please wait,... 
Totral of i581 files to be packaged. 

Ta"get package file yhpplications/XAMPP/xamppfiles/htdocs/masteringextjs/build’P 
ackt/package/app. ion 

Package created at yApplications/XANPP /xamppfiles/htdocs/masteringext]s/byuild/Pa 
kLFpackayer 

Package /Applications'XAMPP /xamppfiles/htidocs/masteringextjs/build/Packt/ /package 
:app. ion (14767937 bytes) is verified, Everything looks good., 

Encrypting package with basic encryption,.. 

Package encrypted successfully: 

Extracting run-time to yApplications/XAMPP /rxamppfiles/htdocs/masteringextijs/buil 
dPackt/package/ 


Run—time is extracted. 


第 一 次 使 用 Sencha Desktop Packager 时 ， 将 提示 你 输入 Sencha 用 户 ID 和 密码 。 用 户 ID 和 密码 
跟 你 在 Sencha 论 坛 中 注册 的 一 致 。 


命令 执行 完毕 后 ， 打 开 build 目 录 ， 可 以 看 到 刚才 创建 的 新 目录 ( Packt/package )， 其 中 ， 有 
一 个 名 为 Mastering Ext JS 的 原生 应 用 程序 ( .app 为 Mac OS 的 ，. exe 是 Windows 的 ): 


局 人 曲 司 build 
| lb | EE 中 gl| | 村 ~| | || 内 7| 六 
FAVORITES Name me 
bE | masteringextjs-theme 
SHARED Y Bl Packt 

T package 


Mastering Ext J 
bE | production 


如 果 现 在 运行 程序 , 仍 会 看 到 一 些 错 误 信息 。 但 我 们 已 可 以 看 到 如 下 所 示 的 登录 界面 ( 注意 
ei 
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局 有 电 局 Mastering EXtjS [built usingan evaluation of SenchaD.,. 


Engliah 加 Cancel 地 Submit 


Sencha Desktop Packager 会 为 我 们 使 用 的 操作 系统 生成 对 应 的 原生 应 用 程序 。 比 如 : 如 果 在 
Mac OS 上 执行 ionpackage， 生 成 的 是 Mac OS 上 的 原生 应 用 程序 。 如 果 是 在 Linux 上 执行 ， 则 生 
成 Linux 的 原生 应 用 程序 ; 在 Windows 上 执行 ， 则 生成 的 就 是 Windows 的 原生 应 用 程序 。 


10.4.3 ”服务 器 端 代码 调整 


为 什么 会 有 错误 信息 出 现 呢 ? 由 于 是 原生 应 用 ,我 们 怎样 才能 知道 发 生 了 什么 错误 呢 ? 能 够 
像 在 浏览 禹 里 运行 那样 进行 调试 中? 要 达成 此 目标 ， 


就 需 要 在 desktoppackager. json 的 ] 
settings 属 性 配置 项 里 添加 以 下 配置 信息 : 


"remoteDebuggingPort": 9100 


之 后 ， 再 次 执行 ionpackage desktoppackager .json 命 令 ， 等 得 新 的 可 执行 文件 生成 。 
打开 该 文件 ， 同 时 也 打开 一 个 Wepkit 内 核 的 浏览 妖 ( 如 Chrome )， 打 开 http://localhost:9100 链 接 。 


浏览 妖 将 列 出 应 用 程序 中 各 个 文件 的 名 称 ， 当 我 们 在 上 面 点 击 时 ，Google Developer Tools 的 操作 
选项 就 会 变 得 可 用 : 


全 日 与 | Developer Tools ~ ionp:/i! x 


5—— 


€ @ | [1 localhost:9100/devtools/devtools.htmlws=|localhost:91... Sr 


Ss 


| Elements urces Network >0urces Hi Eee 一 
Name jo 
Path _ (Headers | Preview Response Cookies 
>、 Request URL: ionp: /phr/staticData/\ist.phnp?_dc=13€7 

tool-sprites.png i 4 民生 PP :一 
了 Requesr Headers View SOU"Ce 
四 | icon-error.png Content-Type: application/x—-ww—form-urlencoded; 
| jonp:/resources/images/sth charsat=UIF-8 
Origin: ionp:// 
| group.php User-Agent: Mozilla/5.8 (Hacintosh; Intel Mac 05 

lionp:/php/security X 18 7_5) AppleWebKit/537.4 IKHTM., like Gecko) 

天- chromium/22.0.1230.1 Safari/537.4 
Sroup.php X-Requested-With: XMLHttpRequest 

— Ionp:/php/security VY Query String Parameters view URL encoded 

| list.phn de: 1367957397634 


L223 ionp:/resources /irnages/to 


list.php 
| ionp:/php/staticData 


器, = 


二 久 cm | Documents Stylesheets Imaqges Scripts XHR Fonts 
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观察 一 下 就 会 注意 到 Sencha Desktop Packager 同 时 还 打包 了 PHP 人 代码， 应 用 程序 试图 把 PHP 
文件 当成 JavaScript 文 件 来 访问 ,由 于 Sencha Desktop Packager 不 支持 PHP 代 码 , 只 能 够 处 理 HTML、 
CSS 和 JavaScript 代 码 ， 因 此 这 时 候 就 会 无 法 正常 工作 。 


我 们 的 服务 器 端 代码 ， 不 管 是 用 何 种 语言 ( PHP、Java 或 .NET ) 开发 的 ， 都 必须 发 布 到 Web 
服务 船上 供 蝎 面 应 用 访问 。 


因此 进行 第 一 步 处 理 时 ， 我 们 需要 在 所 有 的 存储 融 、 代 理 以 及 Ajax 请 求 中 诊 加 完整 的 URL。 


以 某 单 存储 器 为 例 。 在 原来 的 UREL 之 前 添加 http://1Localhost/masteringextjs， 结 果 
如 下 : 


url: 'http://localhost/masteringextjs/php/menu.php' 


现在 ， 搜 索 所 有 的 存储 硕 、 代 理 以 及 Ajax 请 求 〈 在 控制 锅 内 部 ) 并 执行 相同 操作 。 所 有 URL 
的 处 理 孝 必须 采用 上 述 亲 蛙 存 储 如 的 操作 。 


完成 所 有 的 改动 后 ， 重 新 做 一 次 产品 构造 ( 别 忘 了 再 次 修改 build/Packt/production 目 录 下 的 
index.html 文 件 ; 或 者 先 把 index.html 复 制 到 共处 ， 待 产品 构造 过 程 结 束 后 再 答 换 回来 。 每 次 重新 
进行 产品 构造 ，index.html 痢 会 被 睹 普 ) 现在 来 验证 一 下 能 否 运行 : 从 产品 构造 中 移 除 php 文 件 
夹 并 测试 (http:/localhost/masteringextjs/build/Packt/production/ )。 运 行 正 常 了 ， 没 有 任何 错误 。 


Sencha Desktop Packager 产 品 构造 的 目录 如 下 图 所 示 (除了 php 文 件 夹 被 移 除 ， 其 他 的 文件 夹 
和 文件 都 跟前 一 次 构造 时 一 样 ): 


各 旺 向 procuction 


| | | EE = CEN | 加 3 || 闪 7| 区 
FAVORITES -一 | 
bp Sa55=CaChe 
a all-classes,.js 
rb config.rb 
index.html 


5HARELD 


| Packt-—all.scss 
| Packt-example.scss 
| resources 


| theme-capture.json 
theme-capture.png 
国 translations 


现在 我 们 需要 再 次 运行 ionpackage desktoppackager .json 命 令 。 接 下 来 再 次 测试 我 们 
的 原生 应 用 程序 。 结 果 将 与 在 Web 版 本 上 运行 一 样 ， 不 同 之 处 只 在 于 它 是 原生 应 用 程序 : 
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QAO MasteringExt|S [built usingan avaluation of Sencha Desktop Packager, expiring on 5/21/2013] 


Video Store Manager - Mastering Ext Js 
2 Actors 


@ Add 喇 Save Changes ”四 Cancel Changes 坦 Clear Filters 
Search < > _ Regular expression Case sensiti 


Actor 1d First Name Last Name Last Update 
P=NELOPE SUINESS 20N086-02-15 04:3.. 
NICK WAHLBERG 2006 02 15 04:3... 
ED SHASE 2006-02-15 04:3... 
JENNIFER DAVIS 2006-02-15 04:3... 
JOHNNY -OLLOBRIGIDA 2006-02-15 04:3... 
BETTE NICHOLSON 2006-02-15 04:3... 
GRACE MOSTEL 2006-02-15 04:3... 
MATTHEW JOHANSSON 2006-02-15 04:3... 


I@0G000606000 


1 

2 
3 
4 
5 
6 
了 
8 


Ea MailClient WD Nothing Founc 


如 果 我 们 打包 Windows 版 本 的 应 用 程序 ， 结 果 也 一 致 ， 但 运行 的 是 .exe 文 件 ， 应 用 程序 看 
起 来 就 是 Windows 程 序 风 格 。 在 Linux 上 也 一 样 。 


Ajax、JSONP 与 CORS 的 比较 
必须 明日 一 件 很 重要 的 事情 : 当前 , 我 们 的 服务 硕 端 代码 发 布 在 本 地 , 应 用 程序 也 运行 在 本 地 。 


记 住 以 下 这 一 点 是 很 重要 的 :我 们 在 应 用 程序 中 一 直 使 用 Ajax 请 求 , 而 Ajax 只 人 允许 域内 请 求 ， 
不 允许 跨 域 请 求 。 

假设 我 们 要 在 几 个 不 同 的 域 (domainA 、domainB 、domainC ， 等 等 ) 为 用 户 发 布 应 用 程序 ， 
而 服务 需 端 代码 又 发 布 在 packt.com , 那 结 果 会 怎样 呢 ? 肯定 会 出 错 , 因 为 Ajax 无 法 实现 蜂 域 请 求 。 


这 时 候 我 们 可 以 使 用 ISONP ， 但 得 修改 服务 器 端 代 码 以 返回 JSONP 回 调 参 数 , 并且 JSONP 只 
适用 于 GET 请 求 ， 这 就 意味 着 我 们 只 能 取 回 信息 ， 无 法 使 用 PosT、PUT 以 及 DELETE 请 求 。 


还 好 有 第 三 个 选择 方案 ， 就 是 跨 域 资 源 共 享 ( Cross-Origin Resource Sharing，CORS )。 举 个 
例子 ， 如 果 在 服务 需 端 代码 中 局 用 CORS ， 就 可 以 实现 从 domainA 到 packt.com 的 Ajax 请 求 。 这 时 
候 ， 服 务 需 端 代 但 的 改动 是 最 小 的 。 


如 在 PHP 中 ， 我 们 只 需 在 所 有 PHP 文 件 〈 每 个 文件 开头 处 ) 中 添加 以 下 代码 : 


<?php header ("Access-Control-Allow-Origin: *"),; 


问题 就 解决 了 。 


我 们 同时 还 需要 调整 一 下 desktoppackagerjson 文 件 的 内 容 ， 比 如 添加 一 个 允许 蜂 站 点 访问 的 
特定 配置 项 。 
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"applicationName" : "Mastering Ext JS", 
"applicationIconpPpaths" : ["HelloWorld.ico", "HelloWorld.icns"], 
"versionString" : On 
"outputpPath" : "build/Packt/package/", 
"webAppPath" : "build/Packt/production/", 
"settings" : { 
‘remoteDebuggingPort" 9100,， 
"security" { 
val OWL Os Se true 
}, 
"mainWindow" : { 
"autoShow" : true 
} 
} 
} 
若 希 望 了 解 更 多 关于 Sencha Desktop Packager 配 置 及 其 作用 的 信息 ， 可 访问 


http://docs.sencha.com/desktop-packager/1.1, 


因此 ， 如 果 我 们 要 发 布 原生 应 用 程序 给 不 同 的 用 户 ， 束 有 可 能 需要 在 代码 中 启用 CORS。 如 
末 在 一 个 服务 带 发 布 Ext JS 代码 ， 而 在 邦 一 个 不 同 域 的 服务 天 上 发 布 服务 从 病 代 码 ， 也 需要 做 同 
样 处 理 。 


若 布 望 了 解 更 多 关于 CORS 的 信息 ， 包 括 怎样 在 不 同 服务 器 端 语 言 中 尼 用 
人 :> 它 、 浏 览 器 支持 以 及 其 他 信息 等 ， 可 访问 http://enable-cors.org/。 


10.5 ”小 结 
本 章 学 习 了 如 何 使 用 新 的 Ext JS 4.2 主 题 引 擎 创建 一 个 新 主题 ， 了 解 了 产品 构造 的 重要 意义 ， 
掌握 了 产品 构造 的 方法 ， 理 清 了 开发 环境 文件 与 生产 环境 文件 之 间 的 差异 。 


我 们 还 了 解 了 Sencha Desktop Packager， 以 及 怎样 把 我 们 的 Ext JS 程 序 打包 成 可 以 在 Mac OS、 
et 了 的 原生 应 用 程序 。 在 这 个 过 程 中 ,我 们 了 人 解 到 打包 应 用 程序 并 不 是 件 
简单 的 事情 ,还 需要 做 一 些 改动 。 本 章 还 讲解 了 在 满足 跨 域 访问 的 情况 下 ， 发布 应 用 程序 的 可 选 
解决 方案 。 


下 一 章 我 们 将 学 习 如 何 使 用 Ext JS 创 建 一 个 完整 的 WordPress 主 题 。 


创建 WordPress 主 题 


坚 无 疑问 ，Ext JS 是 个 优秀 的 JavaScript 杠 淋 ， 不 仅 能 够 用 来 开发 CRUD 风 格 的 应 用 程序 ， 同 
时 还 能 用 来 开发 如 跟踪 展示 股票 价格 这 样 的 实时 应 用 程序 。 当 然 ，Ext JS 还 可 以 实现 你 能 想到 的 
其 他 类 型 的 应 用 程序 。 本 章 将 用 Ext JS 创建 一 个 WordPress 主 题 。 如 果 你 还 不 熟悉 WordPress， 你 
就 记 住 它 是 个 可 以 用 来 创建 漂亮 网 站 或 博客 的 Web 应 用 发 布 平 台 。 换言之 , WordPress 是 一 个 博客 
内 容 管理 软件 。 你 将 注意 到 ， 本 和 曹 使 用 的 开发 方法 完全 不 同 于 前 儿童 中 用 到 的 开发 方法 。 


本 曹 主要 包括 以 下 内 容 : 


口 组 织 主 题 结构 ; 

口 构建 头 部 和 页 脚 ; 
口 构建 主页 面 ; 

口 构建 侧 边栏 ; 

口 构建 单一 文章 页 面 ; 
口 构建 单一 页 面 。 


11.1 ” 安 洲 WordPress 
在 开始 逐步 讲解 之 前 ， 需 要 安装 WordPress 。 你 可 以 使 用 已 有 博客 的 WordPress ( 比如 
http://loiane.com 和 http://loianegroner.com 上 用 的 WordPress )， 或 者 进行 本 地 安装 。 


如 有 果 你 不 会 安装 WordPress ， 可 以 参考 以 下 教程 : http://codex.wordpress.org/Installing Word 


Press。 


出 于 测试 目的 ， 我 们 使 用 本 地 安 疙 的 方式 。 将 WordPress 安 装 在 XAMPP htdocs 文 件 夹 中 的 
masteringextjs 文 件 夹 中 ， 如 下 图 所 示 : 


11.1 安装 WordPress | 


国 masteringextjs 
EDIESICOIE3 


FAWORITES | Shared Folder 


SHARED a 
bp = app 


有 appjs 

全 db-scripts 
国 | extjs 
.index.html 
国 php 

we [所 作出 了 让 让 与 
translations 
上 国 uploads 

mm Wordpress 


上 图 显示 了 出 于 测试 目的 ， 安 装 WordPress 的 一 些 信息 。 我 们 将 基于 此 安装 版 本 创建 主题 。 
WordPress 安 装 完毕 后 ， 通 过 浏览 器 可 以 看 到 以 下 效果 ( WordPress 安 装 后 使 用 的 是 默认 主题 ): 


@ 昌 8 ， 园 wastering Bt 和 1wordp'， > 


各 SC [| localhost/masteringextis/wordpress/ 


Mastering Ext js 


Wordpress Theme for Mastering ExtJ$ Book 


SAMPLE PAGE 


Mastering Ext JS: Book Link 


Leevea reply 
RECENT POSTS 
Mastering Ext js is availatle 


at http://www.pac<tpub.com/mastering-ext-lavascript/book Mastering Ext |S; Book Link 
Mastering Ext |5; In Detail 

Author: Loiane Groner Mastering Ext |S: RAW 
Overview 

This entry was posted in Uncategorized and tagged Mastering Ext js on eliridi 

March 2 2013. 


当 用 Ext JS 为 WordPress 实 现 了 主题 后 ， 最 终 效 果 图 如 下 所 示 : 
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日 日 园 Mastering Ext J]S 


全 @ | 门 localhost/masteringextjs/wordpress/ 


Mastering EXt JS Wordpress Theme for Mastering Ext JS Book 
Home Sample Page 


Mastering Ext ]S: Book Link Categories 从 
Posted on March 21, 2013 by masteringextjs under Uncategorized eing Ex J5 Book (2) 
Mastering Ext ]S is available at http://www.packipub.com/mastering-ext-javascript/book » Uncategorized (2) 
Author: Loiane Groner 
Archrves 众 
Mastering Ext JS: In Detail 
。 March 2013 
Posted on March 20, 2013 by masteringextjs under Mastering Ext JS Book 
Ext JS is 3 Powerful JavaScr pt web application fromework. Em” 


In this structured guide, you'll lear how to utilize Ext]S to its full potential, 


» Masteting EX: J5: Book 
Covering the crafting of superb locin pagas, menus, thames and more, Mastering Ext J]S s ideal for those Who want to leverage this Link 
powerful web application framewok to its full potentia , 


2 
e# Masteling EX J]5: RAW 
RAW FAQ Overview 

e Hello world! 


This book is currently availaole as a RAW (Read As we Write) book. A RAW book is an ebook, and this one is priced at 20% of the usual 
eBook price. Once you purcnase the RAW book, you can immediately dowrload the content of the book so far, and when new chapters 
lbecome available, You will be notified, and can downlcad the new varsion of the book. When tne book is published, you will receive the | » 
we Tag Coud 
full, finished e300K. 


book ea1s Mastering 
Ext JS Packt 


F you like, You can Preorder the print book at the same time as YOU purchase the RAW book at a significant discount., 
Since a RAW book is an eBook, a RAW bcok is ron returnable and non refundable. 


Local taxes may apply to yoJr eBook purchase. 


Mastering Ext ]S: RAW Overview 
Posted on March 19, 2013 by masteringextjs under Masterhg Ext JS Book 
# ean expert tips anc tricks to make your web aoplicatons look sturning 


» =ull of engaging practical examples specifically “ailored to augment your skills 
s 3uild aseries of great themes, logn pages, and menus 


Hello world! 
Poatcd on March 18, 2013 by maateringextjs under Uncategorzed 


Welcome to WordPress. This is your first post. Edit or delete i:, then start blogging! 


Mastering ExUS book ~ Loiane Groner - http:;//packtpub.com 
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WordPress 主 题 是 WordPress 如 此 流行 的 一 个 重要 原因 。 在 开发 之 前 ， 我 们 需要 了 解 一 下 
WordPress 主 题 的 工作 原理 。 当 创建 一 个 新 的 WordPress 主 题 时 ， 需 要 创建 一 些 被 WordPress 自 动 组 
织 和 管理 的 文件 。 这 些 文件 大 多 数 都 一 日 了 然 ， 但 我 们 还 是 来 浏览 一 下 。 


口 header.php ”加载 博 客 时 ，WordPress 将 该 页 面 转换 为 一 个 HIML 页面 ， 以 便 浏 览 需 可 以 
对 其 演 染 呈现 。header.php 文 件 里 包含 了 到 </heagd> 标 签 之 前 的 主题 设置 代码 。 

口 sidebar.php ”这 是 个 可 以 用 来 被 WordPress 的 get_sidepar () 哺 数 调用 的 可 选 文件 。 我 
们 可 以 在 其 中 添加 代码 ， 用 于 泻 染 小 部 件 以 及 主题 的 侧 边 栏 ( 如 果 该 部 分 存在 的 话 )。 

口 footer.php ”在 此 结束 HTML 代 码 以 构建 完整 的 主题 。 你 也 可 以 根据 需要 在 这 里 呈现 小 
部 件 。 

口 page.php ”用 于 呈现 单一 页 面 。 如 关于 页 面 和 新 闻 页 面 都 是 单一 页 面 。 

D single.php ”用 于 呈现 单一 博客 文章 ， 与 page.php 的 代码 很 相似 。 

口 index.php ” 当 博 客 被 演 染 呈现 时 调用 index.php。 其 包含 并 呈现 文章 、 搜 索 结果 、 尖 部 、 
页 脚 、 侧 边栏 、 出 错 消 息 ， 等 等 。 

D functions.php 我们 可 根据 实际 需要 ， 在 此 添加 额外 的 主题 吨 数 。 

D comments.php 在 此 呈现 评论 、 引 用 以 及 评论 提交 表单 。 
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WordPress 主 题 可 以 根据 需要 使 用 很 多 文件 ， 但 以 上 文件 是 创建 主题 时 最 常 使 用 的 。 


11.3 组 织 主题 结构 


下 面 我 们 开始 吧 ， 先 切换 到 主题 目录 来 创建 主题 。 主 题目 录 为 masteringextjs/wordpress/ 
wp-content/themes ( masteringextjs 文 件 夹 在 XAMPP 的 htdocs 文 件 夹 内 )。 创 建 一 个 新 文件 夹 
ext-theme， 如 下 图 所 示 : 


国 themes 
[om lwr)lar)|l2) » 


FAVORITES Shared Folder 


ssHARED OG 
kb 因 ext=theme 
专 ] index.php 


E | twentyeleven 
E Bl twentytwelve 


创建 以 下 文件 : comments.php、footer.php、functions.php、header.php、index.php、page.php、 


sidebar.php 、single.php 以 及 style.css 等 (这 些 文件 可 以 是 空 的 ， 现 在 只 需 创 建 它 们 即 可 )， 如 下 图 
所 示 : 


国 ext-thamae 
[王国 台 男 | 人 | 站 要 | 区 好 
FAWORITES shared Folder 


sHARED 二 

宣 ] comments.php 
训 ] footer.php 

二] functions.php 


二 ] header.php 
章 ] index.php 
党 ] page.php 
EE streenshot 
$sidebar.php 
章 ] single.php 
| style.css 


同时 ， 在 ext-theme 文 件 夹 中 创建 (或 粘贴 ) 一 个 名 为 screenshot.png 的 文件 ， 我 们 将 用 它 来 表 
示 主 题 。 


现在 我 们 搭建 好 了 主题 的 结构 ， 还 需要 让 主题 出 现在 WordPress 站 点 控制 板 上 。 因 此 ， 要 修 
改 style.css 文 件 ， 在 其 中 添加 以 下 内 容 : 
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/* 
Theme Name: Mastering Ext JS 


Theme URI: http://packtpub.com 
Description: Wordpress theme example for Mastering Ext JS Book - http://packtpub.com 


Author: Loiane Groner 


Version: 1.0 
Tags: minimalistic, simple, extjs, sidebar, elegant, masteringext]js 


*/ 
这 里 ，WordPress 会 尝试 在 主题 日 录 中 查找 style.css 文 件 ， 以 提取 有 关 主 题 的 信息 。 如 果 在 
WordPress 特 性 菜单 中 打开 站 点 控制 板 , 就 可 以 看 到 我 们 的 主题 已 出 现在 其 中 并 可 供 激 活 ( 使用) 了 : 


Avalilable Themes 


庆 ?l 而 面 局 赴 祥 


| 


Ey 
9 = rr ee | ”| 
EP 


Mastering Ext JS 
By Lolane Groner 


Actvate Live PrevieWw Detalls Delete 


激活 该 主题 并 训 览 博客 , 却 发 现 博客 旦 黑 的 。 这 是 好 事 不 用 担心 , 因为 这 就 意味 春 现在 可 以 
开始 构建 我 们 的 主题 了 。 
再 来 看 看 我 们 的 主题 截图 ， 图 中 突出 显示 了 主题 最 重要 的 部 分 : 
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Wate Ext JS Se 


Ce409 on DY masier noests urder Maserrg Sx JS Book 
Ext J5 Is a powerful JavaScript web application framework: 


ee Se Sr < 二 ro 1s ldeal for those who Want to verage this powerful web 
apphc. 


ET urrenthy ayailable 235 a RAWP| lene hee, 二 usual eBool 
he rchase the RAW book, YOU 和 ayallab|l snd LW 
midimol AS can download the new 3 i 下 网 » 
I you like you can preorder the print book at the seme time as YOU purchase the RAW book at a sgnificant discounl 
Since a RAW book is an eBook, a RAW book is non returnable and non refundable. 


Local taxes may apply to Your eBook purchase. 


Mastering Ext J5: RAW Overview 

Posted by masorrgorts vnder Masorrg El JS Bo 
» Leam expert tips and bicks ur web applications look stunning 
» Full of engaging practical examples specifically tailored to augment your skills 
# Build a series of great themes, Jogin pages, and menus 


Helo worsd! 


Posied or March 18, 2013 by masierrgezx under Uncsison Zed 


Walcome to WordPress. This is your first post. Edit or delete It, then start blogging) 


头 部 包含 了 包括 标题 、 描 述 以 及 搜索 区 域 。 下 一 行 是 导航 链接 ,以 便 读 者 可 以 在 博客 页 面 间 
导航 。 侧 边栏 包含 了 各 种 小 部 件 ， 用 以 显示 Categories (类 别 )、Archives( 归档 )、Recent Posts 
(最 近 文 草 )、Tag Cloud Sook 以 及 自 定义 小 部 件 (My Books， 我 的 书籍 )。 页 脚 部 分 包含 了 
版 权 信息 。 内 容 区 域 包含 最 近 文 章 的 列表 。 


接 下 来 做 点 有 趣 的 事情 ， 开 始 编 码 实 现 我 们 的 主题 。 
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使 用 Ext JS 创建 WordPress 主 题 时 ， 需 要 把 Ext JS 发 行 库 安装 到 我 们 的 主题 目录 中 ， 并 创建 一 
个 JavaScript 文 件 ， 在 其 中 将 添加 我 们 需要 的 所 有 Ext JS 代码 。 接 下 来 完成 此 项 工作 ， 复 制 Ext JS 
SDK 到 jext-theme 文 件 夹 中 ， 同 时 创建 一 个 新 的 JavaScript 文 件 app.js: 


国 ext-theme 
四 | | 是 | 区 于 1 性 
FAWVORITES 
SHARED 
0 appjs 
章 ] comments.php 


be 和 襄 ] extjs 
过 |] footer,php 


专 ] functions.php 
专 | header.php 
章 ] index.php 
章 ] page.php 


= streenshot 
过 | sidebar.php 
single.php 
| style.css 


226 第 11 章 创建 WordPress 主题 


现在 ， 我 们 在 header.php 文 件 里 添加 以 下 代码 : 


<html> 

<head> 

<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title> // #1 

<link rel="stylesheet" href="<?php bloginfo('stylesheet directory'); ?> 
/extjs/resources/css/ext-all.css" type="text/css"/> // #2 

<link rel="stylesheet" href="<?php bloginfo('stylesheet url'); ?>"/> // #3 

<script src="<?php bloginfo('stylesheet directory'); ?>/extjs/ext-all.js"></script> 
// #4 

<script src="<?php bloginfo('stylesheet directory'); ?>/app.Js"></script> // #5 
</head> 


WordPress 有 一 个 叫 bloginfo 的 函数 ， 人 允许 我 们 获取 博客 的 所 有 信息 ， 如 博客 名 、 摘 述 、 主 
题目 录 、 样 式 表 URL、 站 点 URL 等 。 如 你 所 见 ， 我 们 在 上 述 代 码 的 5 个 不 同 地 方 使 用 了 该 函数 。 
硅 希 望 了 解 关 于 该 限 数 的 更 多 信息 ， 请 访问 : http://codex.wordpress.org/Function Reference/ 
bloginfo。 


title 标 签 显 示 博 客 名 bloginfo('name')， 同 时 还 通过 wp_title 国 数 显示 当前 页 名 称 
(#1 )。 例 如 : 如 采 我 们 打开 Hello world! 文 章 ， a Mastering Ext JS >> Hello world!。 


接 下 来 导入 Ext JS 文件 : ext-all.css (#2 )、ext-alljs (#4 ) 以 及 app.js(# )。 要 达成 此 目的 ， 
可 以 使 用 bloginfo('stylesheet_dqirectory') 函数 获取 当前 主题 目录 ， 并 结合 每 个 文件 的 
路 径 形 成 一 个 完整 路 径 。 


ext-all.js 文 件 里 包含 了 Ext JS 框架 的 完整 源 代 码 。 因 此， 这 同 前面 章 节 
里 的 处 理 方 式 不 同 。 
最 后 ， 需要 导 人 style. css 文 件 。 通 过 blodginfo ('stylesheet url') 国 数 实现 该 操作 ( #3 )。 
接 下 来 ， 为 headerphp 文 件 添 加 更 多 的 代码 : 
<body> 
<div id="headerCont" style="display:none;"> 
<!-—- content here #6 --> 
</div><!-- headerCont --> 


我 们 将 在 headercont 这 个 div 标 签 里 添加 用 来 显示 博客 标题 和 描述 的 代码 、 搜索 区 域 以 及 
博客 导航 链接 。 由 于 我 们 不 希望 内 容 仪 显示 为 简单 的 HTML 形 式 ， 因 此 将 样式 设 为 不 显示 该 div 
标签 ， 并 打算 用 一 个 Ext JS 组 件 来 显示 该 内 容 。 


用 以 下 代码 蔡 换 注释 #6: 
<div id="top-bar-tile"> 


<div id="top-bar-content"> 
<hl><a href="<?php bloginfo('url'); ?>"> 
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<?php bloginfo('name'); ?> <!-- #7 --> 
</a></h1> 
<span class="slogan"> 
<?php bloginfo('description'); ?> <!-- #8 --> 
</span> 
<div id="search-box"> <!-- #9 --> 
<form method="get" id="searchform" action="" > 
<input type="text" value="Search..." 
onfocus="if (this.value == this.defaultValue) this.value = ''" 
name="s" id="s" /> 
</form> 
</div><!-- search-box --> 
</div><!-- top-bar-content 一 一 > 
</div><!-- top-bar-tile --> 


显示 博客 名 称 (#7 ) 及 其 描述 (#8 )， 还 有 search-box (#9 )。 


接 下 来 , 显示 导航 条 , 使 用 we_nav_menu 困 数 (http:Wcodex.wordpress.org/Function Reference/ 
wp_nav_ menu ) 在 导航 条 上 动态 显示 所 有 的 博客 页 面 ( 名 称 ): 


<div id="links" style="display:none;"> 
<?php wp_nav_ menu (array ( 


'menu' => 'mainnav', 

'menu class' => 'nav-bar-content', 

menu id' => 'navigation', 

'container' => false, 

'theme location' => 'primary-menu', 

Show home' => '1')); ?> 
</div><!-- links 一 -> 


最 后 ， 打 开 index.php 文 件 并 添加 以 下 代码 : 
<?php get header(); ?> 


从 PHP 和 角度 而 言 ， 这 足以 显示 头 部 内 容 了 。 


创建 Ext JS 代码 


现在 我 们 要 开始 创建 Ext JS 代码 了 。 创 建 一 个 如 本 章 前 面 所 描述 的 简单 主题 ， 并 不 需要 太 多 
的 Ext JS 代码 。Ext JS 端的 实现 很 简单 ， 主 要 工作 都 在 于 PHP 及 WordPress 函 数 实 现 上 。 


因此 , 基本 的 实现 思路 是 创建 一 个 使 用 边界 布局 的 视 见 区 。 在 顶部 区 域 放置 头 部 , 底部 是 页 
脚 ， 右 侧 是 侧 边栏 ， 中 央 区 域 是 内 容 。 不 需要 为 这 次 的 任务 创建 MVC 应 用 程序 ; 我 们 可 以 沿用 
Ext JS 原 有 的 实现 方式 ， 在 Ext .onReady 函 数 中 编写 代码。 文 草 、 小 部 件 以 及 导航 按钮 等 的 所 有 
实现 都 将 通过 原 有 且 良 好 的 DOM 处 理 方式 来 动态 完成 。 当 然 ， 你 可 以 采取 你 希望 的 其 他 处 理 方 
式 ， 但 这 次 我 们 就 采用 这 种 方式 。 


在 app.js 文 件 中 添加 以 下 代码 : 
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Ext .onReady (function() { 
Ext.create('Ext.container.Viewport', { 
layout: 'border', 
items: [{ 
region: 'north', 
html: Ext.getDom('headerCont') .innerHTML, // #1 
border: false, 
margins: '0 0 5 0', 
height: 100, 
dockedItems: [{ 
xtype: 'toolbar', 
itemId: 'navToolbar', // #2 
dock: 'bottom', 


Ui: 'footer' 
}] 
}, { 
region: 'center', 
xtype: 'container', // #3 


autoScroll: true, 

styleHtmlContent: true, 

defaults: { 
xtype: 'panel', // #4 
padding: '5px', 
margins: '0 0 5 0', 
collapsible: true, 
styleHtmlContent: true, 
autoScroll: true 


}] 
本 下 
// #5 
}); 
顶部 区 域 放 置 了 一 个 面板 , 添加 headercontdiv 标 签 的 HTML 内 容 ， 这 也 是 设置 该 标签 样 
式 为 style="display:none; "的 原因 (#1 )。 要 显示 导航 链接 ， 则 需要 添加 一 个 navToolbar 
(#2 )。 过 一 会 我 们 会 实现 相应 的 逻辑 代码 。 


当 使 用 边界 布局 创建 一 个 容 希 时 ,中央 区 瑾 是 强制 要 求 的 , 我 们 现在 就 来 创建 该 区 域 。 首先 
创建 一 个 容 般 〈 娄 )， 其 中 声明 了 子 面板 〈 替 ) 用 来 显示 博客 文章 〈 一 个 子 面 板 放置 一 篇 文章 )。 


定义 好 视 见 区 后 ， 我 们 编写 以 下 代码 (#5 ): 


Var buttons = Ext.get (Ext.getDom('links')) .dom.children[0]; // #1 
Var list = Ext.get (buttons) .child('ul') .dom.children; // #2 
Var toolbar = Ext.ComponentOuery.query('toolbar#navToolbar')[0]; 


Ext.Array.each (list, function(1i) { // #3 
toolbar.add({// #4 
text: Ext.get(1i) .dom.children[0] .firstChild.data, // #5 
href: Ext.get(1i) .dom.childrenl[l0] .href, // #6 
hrefTarget: ' _ self' // #7 
}); 
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上 述 代 码 获 取 1Links qiv 标 签 的 第 一 个 子 元 素 (nav-bar-content div 标 签 ， #1 )。 之 局 ， 
获取 第 一 个 ul 标签 子 元 系 的 子 元 系列 表 ( 机 ), 接 下 来 声明 涉 部 工具 栏 的 引用 ,我 们 可 以 六 代 (# ) 
1i 子 元 素 列 表 并 利用 其 内 容 创建 工具 栏 的 按钮 〈《 准 )。 可 以 通过 data 属 性 获取 按钮 文本 (#7)、 
通过 href 属 性 获取 按钮 链接 ( #6 )。 默 认 情 况 下 ，Link (链接 ) 按钮 将 在 新 的 浏览 窗 体 中 打开 链 
接 。 由 于 我 们 希望 在 同一 页 面 中 打开 链接 ， 因 此 只 用 把 hrefTarget 设 置 为 _self 即 可 (#7 )。 


如 何 获 取 Ext JS 对 应 的 HTML 代 码 呢 ?打开 Firebug 或 Google Chrome developer tools ， 分 析 
l1inksdiv 标 签 创建 的 的 HTML 内 容 ， 将 得 到 以 下 代码 . 


TY<dlv id=" Links” style="display:none;"s 
Tadjv class=" Nav-bar-content"s 
uls 
P<li class=" Current page item"s.</ ti> 


bastli class=" page litem page—litem-—2" ">.</ ti> 
iuls 
/dly> 
/Uly> 
lI—— Links ——> 


现在 我 们 顺利 完成 了 第 一 个 实现 〈 头 部 )。 刷新 博客 页 面 ， 结 末 如 下 图 所 示 : 


© a Q y 回 Mastering Ext JS x 


€ 3 CC | localhost/masteringextjs/wordpress/ 


Home Sample Page 


11.5 “构建 页 脚 
下 一 步 来 构建 页 脚 部 分 。 在 footerphp 文 件 里 添加 以 下 人 代码: 


<div id="footer" style="display:none;"> 
<center>Mastering ExtJS pook - Loiane Groner - 
<a href="http://packtpub.com">http://packtpub.com 
</a></center> 


</div> 

<?php wp_footer(); ?> 
<?php get_ sidebar(); ?> 
</body> 

</html> 


和 头 部 的 实现 一 样 ， 其 中 有 一 个 iv 标签 footer， 同 样 不 显示 出 来 ， 其 内 容 将 在 稍 后 实现 
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的 容 角 中 显示 。div 标 签 包含 了 一 个 简单 的 版 权 信息 ， 你 也 可 以 添加 一 些 你 想 要 的 内 容 ， 甚 至 是 
小 部 件 。 


下 一 步调 用 wpb_footer 图 数 。 在 WordPress 模 板 里 面 ， 总 是 要 在 </bodqy> 关 闭 标 签 之 前 调用 
wpb_footezr 图 数 。 如 果 不 调 用 该 图 数 ， 就 会 中 断 一 些 搬 件 的 执行 。 该 困 数 触发 wp_footetr 动 作 ， 
但 并 不 会 对 我 们 主题 的 实现 产生 任何 影响 (我 们 仅 需要 按 WordPress 规 定 调 用 它 即 可 )。 


之 后 ， 我 们 get_sidqebar 果 数 。 该 咽 数 将 调用 sidebarphp 文 件 ， 相 当 于 require 
("sidebar .php")。 由 于 我 们 总 古 需 要 在 页 脚 之 后 (wp_footer 清 数 之 后 ) 加 载 sidebarphp 文 
件 , 所 以 ， ae </body> 和 </html> 关 闭 标 签 之 前 调用 get_sidebar 

以 上 就 是 footer.php 文 件 的 内 容 。 在 index.php 文 件 里 也 需要 调用 footer.php， 因 此 ， 在 头 部 调 
用 (get_header () ) 之 后 添加 以 下 内 容 : 


<?php get_ footer(); ?> 
最 后 来 实现 app.js 文 件 中 的 代码 。 在 视 见 区 里 ， 添 加 以 下 子 项 内 容 : 


{ 
region: 'south', 
xtype: 'container', 
collapsible: true, 
html: Ext.getDom('footer').innerHTML, 
split: true, 
height: 25 
} 


页 脚 固定 在 页 面 底 部 ， 因 此 需要 在 视 见 区 底部 区 域 添 加 一 个 新 容 天 ， 并 使 用 footer 标 签 的 
内 容 作为 HTML 内 容 。 完 成 这 些 工 作 之 后 ， 刷 新 博客 ， 结 来 如 下 图 所 示 : 


四 日 日 ， 国 Mastering Ext J5 


4 (| 门 localhost/masteringextjs/wordpress/ 


Mastering Ext JS 


Home Sample Page 


Mastering ExUS book - Loiane Groner - http://packtpub.com 


11.6 ”构建 主页 面 
接 下 来 创建 主页 面 ， 即 index.php 文 件 。 我 们 在 其 中 已 经 添加 了 头 部 和 页 脚 的 调用 代码 , 接 下 
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来 还 需要 添加 显示 博客 文章 列表 的 代码 。 因 此 ，index.php 文 件 实现 如 下 : 
<?php get header(); ?> 


<div id="main"> 
<div id="content"> 


<div id="contentCont" style="display:none;"> <!-- #1 --> 
<?php while ( have posts() ) : the post(); ?> 
<div id='post' class="post"> <!-- #2 --> 
<div id="title" style="display:none;"><?php the title(); ?></div> <!-- #3 --> 
<div class="post-details"> <!-- #4 --> 
<div class="post-details-left"> 
Posted on <strong><?php the date(); ?></strong> by <span class="author"><?php 
the author(); ?></span> under <span class="author"><?php the categoryl(' 
'); ?></span> 
</div> 


<div class="post-details-right"> 


<?php edit post _ link('Edit', '<span class="comment-count">&nbsp;&nbsp;' ， 
'</span>'); ?><span class="comment-count"><?php comments popup_ link('Leave a 
Comment', '1 Comment', '% Comments'); ?></span> 
</div> 
</div> 
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives 
and search. ?> 
<?php the excerpt(); ?> 
<?php else : ?> 
<?php the content('Read More'); ?> 


<?php endif; ?> 


</div><!-- post --> 
<?php endwhile; ?> 
</div><!-- contentCont 一 一 > 
</div><!-- content --> 
</div><!-- main -一 > 
<?php get_ footer(); ?> 


为 了 更 好 地 组 织 代码 , 内容 区 域 用 main aiv 标 签 表 示 。 其 中 有 个 idq 为 contentcont 的 子 aiv 
标签 ， 同 样 有 style="dqisplay:none;"(#]l ) 这 样 的 设置 ,其 内 容 也 不 会 显示 出 来 ,我 们 会 再 
次 获取 该 内 容 作为 Ext JS 容 带 的 HTML 内 容 。 观 察 代 人 码 可 知 其 中 有 个 循环 二 句 while 
( have_posts() ) 。 在 WordPress 主 题 中 , 我 们 称 之 为 “The Loop”, 其 作用 是 获取 所 有 WordPress 
数据 库 中 的 文 草 内 容 并 将 其 显示 在 浏览 器 中 ， 供 用 户 浏览 。 


对 于 每 篇 文 草 ,我们 都 将 在 id 为 post 的 giv 标签 (#2 ) 里 显示 其 内 容 。 这 样 的 话 ， 后 续 我 们 
就 可 以 操作 DOM 了 。 同 时 ， 我们 也 能 够 知道 文章 数量 ， 并 为 每 篇 文 草 创建 一 个 面板 。 之 后 ， 我 
们 有 一 个 div 标 签 ， 其 内 容 为 文 草 标 题 (#3 ), 使 用 它 来 设置 面板 标题 。 接 下 来 , post-details 
div 标 签 包含 文 草 内 容 ( 替 )， 每 个 文 草 面板 的 HTML 内 容 将 用 它 来 加 载 并 显示 。 
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接 下 来 实现 Ext JS 代 码 ， 只 需 在 视 见 区 实现 代码 后 添 加 以 下 内 容 即 可 : 


Var posts = Ext.get (Ext.getDom('contentCont')) .dom.children; 
Var panel = Ext.ComponentQuery.query('container[region=center]')[0]; 
Ext .Array.each (posts, function(post) { 


panel.add(t 
title: Ext.get (post) .child('div#title') .getHTML(), 


html: post.innerHTML 


本 二 
}); 


变量 posts 是 个 包含 了 contentCcont 标 签 所 有 子 元 素 的 数组 ,是 个 post div 标 签 的 集合 ( 文 
章 集 合 )。 接 下 来 ， 我 们 获取 在 中 央 区 域 创 建 的 容 需 的 引用 ， 以 便 为 其 添加 面板 子 项 。 之 后 ， 通 
过 循环 把 每 篇 文章 (以 面板 形式 ) 添加 到 容 融 中 ， 获 取 title aiv 标 签 以 设置 面板 标题 ， 并 通过 
post qiv 标 签 设 置 面板 内 容 。 


刷新 博客 ， 结 灯 如 下 图 所 示 : 


全 日 日 园 Mastering Ext ]S X 


所 @ | [1 localhost/masteringextjs/wordpress/ 


Home Sample Page 


Mastering Ext JS: Book Link 
Posted on March 21, 2013 by masteringextis under Uncategorized i 


Mastering Ext JS is awailable at http://www.packtpub.com/mastering-ext-javascript/book 


Author: Loiane Groner 


Mastering Ext 3S: In Detail 

Mastering Ext JS: RAW Overview 

Hello world! 

Posted on March 18, 2013 by masteringextis under Uncategorized 1Comment 


Welcome to WordPress. This is your first post. Edit or delete it then start blogging! 


Mastering Ext]S book - Loiane Groner - http://packtpub.com 


中 央 区 域 的 容 带 将 包含 一 篇 篇 的 文章 ， 每 篇 文章 都 用 一 个 单独 的 面板 表示 。 
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现在 ， 我 们 来 构建 侧 边栏 。 前 面 已 经 添加 了 调用 代码 〈 在 footerphp 文 件 中 )， 接 下 来 需要 在 
sidebarphp 文 件 里 一 步 步 添 加 实现 代码 。 
首先 ， 添 加 id 为 sidqebar 的 div 标 签 ， 


<div id="sidebar" style="display:none;"> 
<!—-— #1 --> 
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</div> 


注意 上 述 代码 中 div 标 签 的 style="display :none; "设置 。 后 面 我 们 将 再 次 对 DOM 进 行 处 
理 ， 以 便 在 ExtJS 组 件 里 显示 该 标签 子 元 素 。 在 注释 位 置 #1 中 ,将 添加 其 他 div 标 签 ， 每 个 div 标 签 
代表 侧 边 栏 的 一 个 小 部 件 。 


一 个 要 沃 加 到 侧 边栏 的 小 部 件 是 市 有 各 有 肯 文章 数目 的 分 类 列表 : 


<div id="categoriesCont"> 
<ul> 
<?php wp_list cats('sort column=name&optioncount=l&hierarchical=0'); ?> 
</ul> 
</div> 


wp _lList_cats 是 一 个 WordPress 函 数 ， 可 用 以 获取 分 类 列表 。 若 希望 了 解 
& 更 多 关于 该 函数 的 信息 ， 请 访问 https://codex.wordpress.ore/Function Reference/ 


wp list _ cats 。 


categoriesCont div 标签 的 最 终 效 果 如 下 图 所 示 : 


本 Masterine Ext J]5 Book (2) 


接 下 来 声明 Archives( 归档 ) 小 部 件 : 


<div id="archivesCont"> 
<ul class="list-archives"> 
<?php wp_get_archives('type=monthly'); ?> 
</ul> 
</div> 


我 们 可 通过 WordPress 的 wp_get_archives 疡 数 获取 归档 列表 。, 若 希 望 了 解 
更 多 关于 该 函数 的 信息 ， 请 访问 http:/codex.wordpress.ore/Function Reference/ 


wp get archlves。 


archivesCont div 标 签 的 最 终 效 果 如 下 图 所 示 : 
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Archrves 


* March 2013 


接 下 来 实现 Tag Cloud (标签 云 ) 小 部 件 : 


<div id="tagsCont"> 


<?php 
Sargs = array( 
'smallest' => 8, 
'largest' => 16 


)3 


wp_tag_cloud(S$args);} 


?> 


</div> 


有 


我 们 可 通过 WordPress 的 wp_tag_cloud 函 数 获取 标签 列表 。 若 硕 望 了 解 更 
多 关于 该 函数 的 信息 ， 请 访问 http://codex.wordpress.org/Function Reference/wp 
tag cloud。 


tagsCont div 标 签 的 最 终 效 果 如 下 图 所 示 : 


Tag Cloud 


book ets Masterin 
Ext Jo Packt 


接 下 来 实现 Recent Posts ( 最 近 文 草 ) 小 部 件 : 


<div id="recentCont"> 
<ul class="]list-archives"> 


<?php 
Sargs = array( 'numberposts' => '5' ):; 
Srecent posts = wp_ get recent posts( Sargs ) ; 


foreach( Srecent posts as Srecent )t{ 


echo '<1i><a href="' 

get_ permalink (S$Srecent["ID"]) 
'" title="Look '. 

esc_ attr($recent["post title"]).'" >' 
Srecent["post title"].'</a> </1i> '; 


7 
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我 们 可 通过 WordPress 的 wp_get recent posts 节 数 获取 最 近 文 章 列表 。 
若 希 望 了 解 更 多 关于 该 函数 的 信息 ， 请 访问 http://codex.wordpress.org/Function_ 


Reference/wp get recent posts。 


recentCont div 标 签 的 最 终 效 果 如 下 图 所 示 : 


J 
J | 


Mastering Ext JS: Book Link 
Mastering Ext J5: In Detail 
Mastering Ext ]5: RAW 
Hello world! 


你 也 可 以 在 sidebar.php 文 件 里 用 HTML 代 码 创建 日 定义 小 部 件 。 比 如 ， 可 以 在 以 下 小 部 件 里 
呈现 一 个 图 片 。 


<div id="booksCont"> 
<!-—- random HTML code 一 -> 


</div> 


booksContdiv 标 签 的 最 终 效 果 如 下 图 所 示 : 


Mastering Ext JS§: RAW 


以 上 就 是 sidebar.php 的 代码 实现 。 回 到 app.js 文 件 里 , 我 们 需要 在 屏 从 右 侧 区 域 瀛 加 一 个 表示 
侧 边 栏 的 新 容 禹 : 
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{ 
region: 'east', 
xtype: 'container', 
collapsible: true, 
autoScroll: true, 
styleHtmlContent: true, 
layout: { 
type: 'vbox', 
align: 'stretch' 
yy 
split: true, 
width: 200, 
defaults: { 
xtype: 'panel', 
padding: '5px', 
margins: '0 0 5 0', 
collapsible: true, 
styleHtmlContent: true, 
autoScroll: true 
}, 
items: [{ 
title: 'Categories', 
html: Ext.getDom('categoriesCont') .innerHTML 
} ,1 
title: 'Archives', 
html: Ext.getDom('archivesCont') .innerHTML 
} ,1 
title: 'Recent Posts', 
html: Ext.getDom('recentCont').innerHTML 
} ,1 
title: 'Tag Cloud', 
html: Ext.getDom('tagsCont').innerHTML 
} 
title: 'My Books', 
html: Ext.getDom('booksCont').innerHTML 
}] 
} 


在 右 侧 区 域 新 容 带 里 添加 的 各 个 子 项 即 是 刚才 创建 的 各 个 div 标签 的 HITML 内 容 。 
刷新 博客 ， 结 末 如 下 图 所 示 : 


8@ A (Mwastering ExtJs x \ 


< SS CC [localhost/masteringextjs/wordpress/ 


Mastering Ext JS 


Home Sample Page 


Mastering Ext ]S: Book Link 
Posted on March 21, 2013 by masteringextjs under Uncategorized pte 


Mastering Ext JS is available at http://www.packtpub.com,/mastering-ext-javascript/book 


Auther Loiane Groner 


Mastering Ext ]S: In Detail book eds Mastering 
Mastering Ext JS:: RAW Overview Ext JS Packt 


Hello world! 
My Books 众 


从 
Posted on March 18, 2013 by masteringextis under Uncategorized a 
Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! [si 


Mastering Ext]S book - Loiane Groner - http://packtpub.com 
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11.8 构建 单一 文章 页 面 


我 们 用 ExtJS 创 建 第 一 个 属于 自己 的 WordPress 主 题 ， 现 在 到 最 后 阶段 了 。 我 们 还 剩 下 两 项 工 
作 没 有 完成 : 实现 page.php 文 件 和 single.php 文 件 的 代码 。 这 里 我 们 先 来 创建 sngle.php 文 件 : 


<?php get header(); ?> 


<?php /* If there are no posts to display, such as an empty archive Page */ ?> 
<?php if ( ! have posts() ) : ?> 

<hl>Not Found</h1i> 

<p>Apologies, but no results were found for the requested archive. Perhaps 

searching will help find a related post</p> 
<?php endif; ?> 
<div id="contentCont" style="display:none;"> 
<?php while ( have posts() ) : the post(); ?> 


<div id='post' class="post"> 
<div id="title" style="display:none;"><?php the title(); ?></div> 
<div class="post-details"> 
<div class="post-details-left"> 


Posted on <strong><?php the date(); ?></strong> by <span class="author"><?php 
the author(); ?></span> under <span class="author"><?php the category(', 
'); ?></span> 
</div> 
<div class="post-details-right"> 
<?php edit post link('Edit', '<span class="comment-count">&nbsp;&nbsp;' ， 
'</span>'); ?><span class="comment-count"><?php comments popup_ link('Leave a 
Comment', '1 Comment', '% Comments'); ?></span> 
</div> 
</div> 
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and 
search. ?> 
<?php the excerpt(); ?> 
<?php else : ?> 
<?php the content('Read More'); ?> 


<?php endif; ?> 


</div><!-- post --> 
</div> 
<div class="spacer"></div> 


<?php endwhile; ?> 


<div class="spacer"></div> 
<?php get_ footer(); ?> 


把 该 文件 与 index.php 文 件 比 较 一 下 , 你 会 发 现 两 者 很 相似 。 但 不 同 于 index.php 呈 现 所 有 文章 
的 列表 ，WordPress 在 这 里 只 取 回 一 个 文 草 。 由 于 前 面 已 经 实现 了 ExtJS 代 码 (共用 列 出 所 有 文章 
的 Ext JS 代码 )， 因 此 这 里 就 不 需要 再 针对 Ext JS 代 码 做 什么 了 。 
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© a @ 园 wasterine Ext J]S»w Master x 


-一 


全 @ 门 localhost/masteringextjs/wordpress/?p=4 


Home Sample Page 


Mastering Ext ]5: RAW Overview 


Posted on March 19, 2013 by masteringextjs under Mastering Ext JS Book Leave a comment 


se Learn expeit tips ang tricks to make your web applications look stunning 
® Full of engaging practical examples specifically tailored to augment your skills 
s Build a Series of great themes, login pages. and menus 


< 人 < <« <« «< 


Mastering Ext]S book - Loiane Groner - http://packtpub.com 


11.9 构建 单一 页 面 


single.php 文 件 与 page.php 文 件 具 有 相同 的 内 容 。 因此 我 们 只 需要 复制 粘贴 sngle.php 文 件 的 内 
容 到 page.php 文 件 即 可 。 页 面 和 文章 在 WordPress 里 都 按 同 样 方式 处 理 。 在 博客 里 打开 一 个 页 面 ， 
结果 如 下 图 所 示 : 


e@ee 6 加 Mastering ExtJsw Sampl 2* “本 


名 SC [| localhost/masteringextjs/wordpress/?page_id=2 


Home Sample Page 


Sample Page 
Posted on March 18, 2013 by masteringextjs Under A ing Ext J§ Book 
0 Mastering Ext ]5 Book 
This is an example page. It's different from a blog post because it Will stay in one place and will show up in your site 
navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. t might © »* Uncategorized (2) 
say something like this: 
Hi there! I'm a bike messenger by day, aspiring sctor by night, and this is my blog. Tlive in Los Angeles, 
have a great dog named Jack, and I like piiia coladas. (And gettin’ caught in the rain,) March 2013 
. rc 


.Or something like this: 


Mastering Ext]S book - Loiane Groner - http://packtpub.com 


就 这 样 ， 我 们 用 Ext JS 完成 了 第 一 个 WordPress 主 题 。 接 下 来 按照 你 的 喜好 去 完善 它 吧 。 


11.10 “小 结 

本 章 我 们 掌握 了 如 何 通 过 Ext JS 构建 一 个 完整 的 WordPress 主 题 ， 了 解 到 构建 最 简单 的 
( WordPress ) 主题 只 需 非 常 少 的 Ext JS 代码 。WordPress 有 非常 丰富 的 图 数 供 我 们 直接 使 用 ， 使 我 
们 的 工作 变 得 更 人 简单 了 。 

下 一 草 将 讲解 如 何 测试 Ext JS 应 用 程序 ， 学 习 重 用 代码 构建 移动 应 用 的 方法 ， 并 告知 可 获取 
更 多 相关 资源 的 地 址 ， 从 而 进一步 丰 宇 我 们 的 应 用 程序 。 


调试 与 测试 


本 章 的 标题 是 调试 与 测试 , 但 我 们 要 讲 的 远 不 止 这 些 。 在 进一步 展开 之 前 , 我 们 先 来 谈 谈 调 
试 技术 ， 调 试 技术 与 编码 技术 同等 重要 。 人 们 写 代 人 码 时 党 第 想 当然 地 认为 代码 一 执行 就 能 成 功 ， 
但 结果 往往 并 非 如 此 。 编 写 代 人 码 ， 然 后 程序 抛 出 异常 或 错误 ， 这 时 候 , 需要 再 次 深入 代码 找 出 问 
题 所 在 ， 这 个 过 程 是 开发 人 员工 作 的 一 部 分 ,甚至 是 生命 的 一 部 分 。 本 章 讨 论 的 第 二 个 话题 是 测 
试 ， 你 怎么 测试 一 个 Ext JS 应 用 程序 ?编码 ， 然 后 打开 浏览 妖 进 行 测试 ， 甚 至 不 借助 一 些 方 式 方 
法 。 是 不 是 还 有 更 好 的 测试 方式 呢 ? 当然 有 ， 而 且 你 在 本 章 就 会 看 到 。 再 讲 得 远 一 点 ， 我 们 都 喜 
爱 文本 编辑 器 ( 可 以 肯定 总 有 一 球 是 你 钟爱 的 , 比如 Sublime Text、 Text Mate 、Notepad++、Eclipse、 
Aptana、Visual Studio 、Vim ， 等 等 ), 但 仍 有 很 多 其 他 工具 能 够 帮助 我 们 提高 Ext JS 开发 效率 , 我 
们 也 将 讨论 它们 。 我 们 已 经 领略 了 Sencha API 的 慰 艳 效 采 ,但 世界 各 地 的 众多 开发 者 们 仍 在 分 至 
他 们 的 成 采 并 给 予 我 们 更 多 帮助 。 其 中 有 些 功 能 甚至 是 Ext JS 无 法 提供 的 ， 我 们 可 以 借助 这 些 成 
条 完善 提升 应 用 程序 。 最 后 ， 我 们 将 探讨 移动 应 用 程序 的 开发 ，Ext JS 框架 可 用 来 开发 Web 果 面 
应 用 程序 , 但 不 适用 于 开发 移动 应 用 程序 , 那么， 要 怎样 才能 使 同一 个 应 用 程序 在 果 面 和 移动 设 
备 上 都 正常 运行 呢 ? 届时 我 们 会 谈 到 这 个 话题 。 


本 章 主 要 包括 以 下 内 容 : 


口 调试 Ext JS 应 用 程序 ; 

口 测试 Ext JS 应 用 程序 ; 

口 有 用 的 工具 箱 ; 

口 转换 Ext JS 应 用 为 移动 应 用 程序 ; 
口 发 现 更 多 的 开源 插件 。 


12.1 调试 Ext JS 应 用 程序 


通过 本 书 的 学 习 ， 我 们 认识 到 调试 的 重要 性 ， 特 别 是 当 我 们 掌握 了 一 种 更 简单 的 方法 计算 出 
正确 Componentouery 选 择 器 时 。 我 们 用 ExtJS 开 发 应 用 程序 时 ， 必 须 使 用 一 款 调试 工具 。 在 这 一 
过 程 中 ， 我 们 不 仅 能 达到 调试 的 目的 ， 也 将 掌握 更 多 的 Ext JS 知识 ， 这 是 一 个 非常 好 的 练习 机 会 。 12 
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我 们 创建 Ext JS 应 用 程序 时 , 必须 记 住 几 件 事情 ( 不 只 是 Ext JS , 通常 的 JavaScript 应 用 也 如 此 ): 
大 小 写 敏感 问题 ，LoginsScreen 类 不 同 于 Login screen; 注意 保留 字 ( http://mattsnider.comy/ 
reserved-words-in-javascript/ )， 你 可 以 将 其 用 于 命名 空间 、 类 名 和 包 名 ， 但 不 能 用 于 变量 名 ; 拼写 


检查 ， 这 点 非 浓重 要 ， 我 们 禹 字 时 ， 有 时 候 可 能 多 敲 了 字符 〈 翌 手指 综合 征 )。 

10 年 前 进行 JavaScript 编 程 时 , 我 们 唯一 的 调试 工具 就 是 alert 函 数 。 那 时 通常 放 几 个 alert 
哨 数 在 代码 中 ， 然 后 执行 代码 ， 看 看 哪个 alert 没 有 执行 ， 从 而 找 出 错误 所 在 。 现 在 ,我 们 有 了 
控制 台 ， 如 我 们 所 愿 可 以 通过 控制 台 记 录 日 志 来 发 现 警 告 和 错误 信息 。 

我 们 还 有 很 多 好 的 调试 工具 。 最 重要 的 两 个 是 Google developer tools 和 Firebug for Firefox ， 你 
至 少 得 掌握 好 其 中 一 种 的 使 用 方法 它 俩 很 相似 )。 


比如 使 用 Firebug for Firefox。 它 有 几 个 标签 页 : 在 Console 标 签 页 ,可 以 查看 控制 台 信 息 以 及 
加 载 的 文件 ， 如 下 图 所 示 : 


a 于 < 2» 中 Console HTML 《SS Script DOM Net Cook... Hum... 


12 : Clear Persist Profile All Errors Warnings Info Debug Info Cookies 


pb GET http:/ /localhost/masteringextjs/app/view/film/Films.js? dc=1369686427152 200 OK 223ms ext-alljs (line 18) 
bp GET http://localhost/masteringextjs/app/view/abstract/SakilaGrid.js? dc=1369686427666 200 OK 14m5 ext-all.js (line 18) 
bp GET http:/ /localhost/masteringextis/app/view/toolbar/AddEditDelete.js? dc=1369686427935 200 OK 4ms ext-alljs (line 18) 
pb GET http:/ /localhost/masteringextjs/extjs/ux/RowExpander.js? dc=1369686428224 200 OK 3ms ext-alljs (line 18) 
pb GET http:/ /localhost/masteringextis/app/view/film/FilmCategories.js? dc=1369686428234 200 OK 3ms ext-all.js (line 18) 
b GET http:/ /localhost/masteringextjs/app/view toolbar/SearchAddDelete.js? dc=1369686428244 200 OK 3ms ext-alljs (line 18) 
bb GET http:/ /localhost/masteringextjs/app/view/film/FilmActors.js? dc=1369686428251 200 OK 2ms ext-alljs (line 18) 
bb GET http:/ /localhost/masteringextis/app/store/film/Films.js? dc=1369686428267 200 OK 2ms ext-alljs (line 18) 
bp GET http:/ /localhost/masteringextijs/app/model /film/Film.js? dc=1369686428275 200 OK 3ms ext-alljs (line 18) 
bb GET http:/ /localhost/masteringextis/app/store/film/Ratings.js? dc=1369686428288 200 OK 2ms ext-alljs (line 18) 
b GET http:/ /localhost/masterinaextis /apnp/store/film/FilmCateaories,is? dc=1369686428295 200 OK 3ms ext-allis (ine 18) 
>>> 才 


关于 文件 加 载 成 功 与 否 ， 这 可 是 个 大 工程 。 如 : 类 名 ( MVC 方式 下 )、CSS 路 径 设 置 以 及 包 
含 在 index.html 文 件 里 的 JavaScript 问 题 ， 这 些 简 单 的 错误 都 有 可 能 导致 文件 加 载 不 成 功 。 所 有 这 
些 常 见 错误 都 可 以 通过 Console 或 Net 标 签 页 查 清 楚 。 


HTML 标 签 页 里 可 以 碍 看 详细 信息 ，ExtJS 生 成 的 HTML 代 码 如 下 : 


:<€ :lr Cons.. | HIMLY | CSS Script DOM Net Cook... lumi... DP i 大 鲍 司 
ke Edit body#ext..8.x-body < html.x-border-box Style ” | Comput Layout DOM 
.X-VLewport， ext-all.css (line 18) 


<!DOCTYPE htmi> 
6 .Xx-viewport body 
{ 


有 <html class="x-border-box x-strict x-viewport"> 
e A border: 0 none; 
<body id="ext-gen1018" class="x-body x-gecko x-mac x-reset height: 100%; 
x-border-layout-ct x-container x-container-default"> marvains 个 ， 
<div id="mainmenu-1030" class="x-panel x-border-item overflow: hidden: 
x-box-item x-panel -default" style="width: 18S5px; right: auto; padding: 0; 
left: Opx; top: 33px; margin: OQpx; height: 828px;"> position: static; 
<div id="appheader-1031" class="x-toolbar x-border-item 3 
x-box-item x-toolbar-footer x-box-layout-ct" style="border- 
bottom: 4px solid rgb(76, 114, 164); height: 3@px; right: 
auto; left: Opx; top: 3px; margin: OQ@px; width: 798px;"> 
Pp <div id="mainpanel-1037" class="x-panel x-border-item 


.x-border- ext-all.css (line 18) 
layout-ct { 
background-color: #DFE8F6; 


YY 


鼠标 悬 停 时 , 涉及 HTML 代码 的 部 分 会 高 亮 显 示 。 还 有 CSS 和 Script 两 个 标签 页 。 我 们 可 以 通 
过 实时 改变 CSS 和 脚本 来 观察 实时 效果 。 这 可 真神 奇 ! 因此 ， 学 习 使 用 调试 工具 是 很 重要 的 。 
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解 更 多 关于 Google developer tools 的 信息 ， 请 访问 https://developers.google.com/ 


chrome-developer-tools/。 


| 若 希 望 了 解 更 多 关于 Firebug 的 信息 ,请 访问 http://getfirebug.com/; 若 希 望 了 


当然 ， 如 采 你 希望 将 Ext JS 代 人 码 调 试 能 力 提 升 至 一 个 新 的 高 度 ， 还 有 一 个 很 特别 的 工具 
Illuminations for developers ( http:/www.illuminations-for-developers.com/ )， 这 是 个 Ext JS 专用 调试 
工具 ， 也 是 个 付费 工具 ， 但 性 价 比 很 高 ， 是 个 Firebug/Firefox 扩 展 。 


来 看 看 Illuminations for developers 的 Data 标 签 页 : 


:<€ >:|* Console HIML Css Script DOM Net Cookies | iluminationsv | 


Records 


TE 司 Data 器 Elements Packt.store.staticData.Actors 


国 Rae store.security. Ci each model.security.Group>[5] £ Fw {wed 3 
storeld="groups" } Feb 15 2006 

ElPackt.store.staticData.Actors<Packt.model.staticData.Actor>[201] { 04:34:33 undefined "1" "PENELOPEY 
storeld="staticData.Actors" } GMT-0200 

Packt.store.staticData.Categories<Packt.model.staticData.Category>116) { (BRST) } 
storeld="staticData.Categories" } Date { Wed 

| 梧 Packt.store.staticData.Cities <Packt.model.staticData.City>[0] 至 Feb 15 2006 
storeld="staticData.Cities™ } 天 04:34:33 undefined "2" 

性 | Packt.store.staticData.Countries<Packt.model.staticData.Country>[109j £ GMT-0200 
storeld="staticData.Countries” } (BRST) } 

尼 | Packt.store.staticData.Languages<PacktLmodel.staticData.Language>[6] £ Date { Wed 
storeld="staticData.Languages" } Feb 15 2006 

04:34:33 undefined "3" 


我 们 可 以 看 到 所 有 的 存储 迄 、 已 加 载 数 据 ， 以 及 可 调用 的 方法 ( 如 末 需 要 的 话 )。 同 时 ， 也 
能 在 部 件 层次 中 看 到 所 有 的 小 部 件 及 触发 事件 : 


i:€ Sil Console HIML CSs Script DOM Net Cookies [illuminations v 


Lisa es Data 名 Elements All Packt.vi...Viewport > Packt.view.MainPanel Packt.vi...a.Actors Met... 
aaCKLVIeW g19 +” 


。 id= 1 ot 了 Active Events 
回 Packtview. Row { id=" Noyo Sw -1929" 于 b beforedestroy 国 Extutil.Event 于 
[items] 后 Packt.view.menu.Accordion { id="mainmenu-1030", title="Menu" } name="beforedestroy" } 
= litems)] EPackt.view.Header { id="appheader-1831"™ } b beforeshow 国 Ext.util.Event 于 
VW [items]| |Packt.view.MainPanel £ id="mainpanelL-1937” } name="beforeshow” } 
bp [dockeditems] | tabBar eB Ext.tab.Bar { id="tabbar-1038", title="&#168;" } b> beforestaterestore 国 Ext.util.Event { 
bb [litems] Extpanel.Panel { id="panel -1039", title="Home” name= "beforestaterestore” 
bp litems] | activeTab 站 Packt.view.staticData.Actors<Packt.model.staticData.Actor> { id="actorsgrid-1868", title="A “| | 信 beforestatesave 。 国 RE 3 
[items] .局 Ext.container.Container { id="container-1041" } namen"bheforestutesnve. } 
全 Pp columnmove 国 Ext.util.Event { 
name="Columnmove™ } 


bp columnresize 国 Ext.util.Event 于 


Ext.dd.StatusProxy 芋 id="headercontoiner-10844-drag-status-proxy™ } 


Ext.dd.StatusProxy { id="headercontoiner-1049-drag-status-proxy™ } 


精通 调试 工具 与 精通 ExtJS 编 程 技术 同等 重要 。 选 择 你 喜爱 的 工具 ,体验 编 程 和 调试 的 乐趣 吧 ! 
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测试 是 应 用 开发 及 维护 工作 的 重要 组 成 部 分 。 如 采 不 编写 测试 代码 , 我 们 就 只 好 手工 测试 每 
个 使 用 案例 ， 而 一 旦 我 们 改动 了 代码 ， 就 不 得 不 重新 再 手工 测试 一 遍 。 相同 的 情况 也 会 发 生 在 我 
们 维护 代码 的 过 程 中 。 开 发 人 员 通 稼 只 测试 改动 部 分 的 代码 , 但 正确 的 方式 应 该 是 进行 回归 测试 
以 搞 清 楚 改 动 部 分 是 否 会 破坏 其 他 部 分 。 因 此 ， 花 些 时 间 写 测试 代码 将 大 大 市 省 后 期 时 间 。 你 在 
前 期 会 花 多 一 点 的 时 间 , 但 是 ,之 后 你 却 可 以 做 到 点 击 一 下 ， 就 能 够 运行 所 有 的 测试 并 验证 什么 
被 破坏 了、 什么 还 是 正常 的 。 
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我 们 还 经 常 对 服务 器 端 代 码 做 单元 测试 ，Java、PHP、Ruby 和 C# 社 区 提供 了 许多 可 以 对 服务 
希 端 代码 进行 单元 测试 的 工具 ， 但 有 时 候 我 们 会 忘 了 对 前 端 代码 进行 单元 测试 (这 里 指 的 是 Ext 
JS )。 不 用 担心 ， 也 有 些 工具 可 以 用 来 测试 Ext JS 代码 。 


一 个 非常 流行 的 JavaScript 测 试 工 具 就 是 Jasmine ( http://pivotal.github.io/jasmine/ )。Jasmine 是 
一 个 用 于 行为 驱动 开发 ( Behavior-driven development ，BDD ， http://en.wikipedia.org/ 
wiki/Behavior-driven development ) 的 测试 工具 ,在 ExtJS 文 档 中 可 以 找到 两 处 用 Jasmine 进 行 Ext JS 
应 用 测试 的 参考 http://docs.sencha.com/extjs/4.2.0/#!/guide/testing 和 http://docs.sencha.com/extjs/ 
4.2.0/#!/guide/testing controllers。 


我 们 介绍 的 例子 使 用 另 一 个 名 为 Siesta 的 测试 工具 ( http:/www.bryntum.com/products/siesta/ )。 
Siesta 也 能 用 于 测试 JavaScript 代 人 码 ， 但 其 最 精彩 的 部 分 是 提供 了 测试 Ext JS 应 用 程序 的 专用 API。 


开始 之 前 ， 列 一 下 测试 Ext JS 应 用 程序 的 操作 步骤 : 


(1) 使 用 Sencha command 生 成 “测试 ”构造 ; 

(2) 测试 “测试 ”构造 ; 

(3) 安装 Siesta; 

(4) 创建 harness ( test harness: 测试 辅 件 ， 测 试 夹具 ); 
(5) 创建 测试 用 例 。 


让 我 们 开始 吧 ! 


12.2.1 使 用 Sencha command 生 成 “测试 ”构造 


一 步 是 使 用 Sencha command 生 成 项 目的 测试 构造 。 我 们 在 第 10 草 已 经 学 习 了 操作 方法 ， 打 
开 终端 应 用 程序 ， 切 换 到 应 用 程序 目录 ， 并 执行 sencha app build testing， 截 图 如 下 所 示 : 


@OA | masteringextis — java — 80x24 


loiane:~ Loianes$ cd /Applications/YMPP/xampofiles/htdocs/masteringextis 
loiane:masteringextijs loiane$ sencha app build testing 

Sencha Cmd v3.1.0.256 

IINF] Including theme package ext-theme-—classic for app. theme=ext-—-theme—cleassic 


IINMF] init-piuyin: 

[INF] 

[INF] init-pivgin: 

IINF] Invoking plugin (/Applications/XMPP/xamppTiles/htdocs/masteringextijs/.sen 
cha/app/plugin.xml) ~ supported targets: ~before-app-buitd 

[INF] 

IINF] ~yefore-app-buyuild: 

[INF] Invoking plugin (/Applications/XMPP/xamppfiles/htdocs/masteringextjs/.sen 
cha/app/plugin.xml) ~ supported targets: app-byild 

[INF] 

IINF] cmd~root-plugin. init-properties: 

[INF] 

[INF] init-properties: 

[INF] 

IINF] init-sencha-command: 

[3NF] 

[INF] init: 

[INF] 
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Sencha command 将 在 masteringextjs/build/Packt/testing 目 录 中 创建 一 个 用 于 测试 的 新 文件 夹 ， 
其 中 还 包含 了 测试 用 的 编译 代码 。 别 忘 了 复制 php 和 translations 文 件 夹 到 testing 文 件 夹 中 ; 否则 ， 
测试 构造 过 程 就 会 出 错 : 


| testing 
[3 孜 下 | 要 > | 全 儿 亲 >| 六 
FAVORITES 一 Name， 
El all=classes.js 


zh config.rb 
index.html 

| Packt-all.scss 

| Packt-example.scss 

国 php 

[| resources 

| theme=capture.json 

| theme-captyure.png 
bE | translations 


下 一 步 是 测试 “测试 ”构造 。 要 达成 此 目的 ， 需 执行 链接 http://localhost/masteringextjs/ 
build/Packt/testing, 如 下 图 所 示 : 


阐 晶 日 加 roc 


试 


和 @ | 站 localhost/masteringextjs/build/Packt/testing/ 57| 三 


Lm 


a 


名 cance 这 Submit | 


一 切 正 第 。 


12.2.2 ”安装 Siesta 并 创建 测试 用 例 
接 下 来 我 们 安装 Siesta， 以 便 可 以 用 这 个 好 工具 创建 测试 用 例 。 


首先 ， 从 http:/www.bryntum.comAproducts/siesta/ 下 载 Siesta。 对 于 我 们 的 示例 ， 使 用 免费 的 Lite 
版 (精简 版 ) 即 可 。 付 费 版 包含 服务 支持 、Selenium 和 Phantom JS 集成 以 及 路 页 测试 等 增值 内 容 。 


下 载 Siesta 后 ， 将 其 解压 至 项 目 文件 夹 中 。 在 我 们 即将 开始 编写 测试 代码 之 前 ， 先 回顾 一 下 
还 需要 做 些 什 么 : 
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(1) 创建 tests 文 件 夹 ; 

(2) 创建 Harness 文 件 ; 

(3) 创建 index.html 文 件 ; 

(4) 创建 各 个 所 需 测试 用 例 。 


因此 , 第 一 步 是 在 项 目 文件 夹 中 创建 一 个 名 为 tests 的 新 文件 夹 。 本 市 结束 后 , 效果 如 下 图 所 示 : 


FAVORITES 


SHARED 


接 下 来 创建 Harness 文 件 。 我 们 希望 把 所 有 测试 用 例 都 看 成 是 项 目的 一 部 分 ， 
中 声明 这 些 测试 用 例 。 将 Harness 文 件 命 名 为 Index.js， 并 在 tests 文 件 夹 中 创建 它 ， 


国 masteringextjs 


[号 天 | | | 缀 | LQ@ || 亲 7| 为 


上 天 app 
_ | app.json 
bootstrap,css 
中 bootstrap.js 
是 build 
vv 条 Packt 
bp Mm testing 
了 build.xml 
国 ext 
s index.html 
» | overrides 
» 国 packages 
* 的 php 
站 Readme.md 
b ll resources 
上 向 | sass 
pb mm siesta—l1.1.8-lite 
vv BM tests 
中 010 _sanity.t.js 
外 020 login.t.js 
® index.html 
sl index,js 
> 图 php 
>» 关 translations 
» | translations 


>» 和 遍 | ux 


在 Harness 文 件 


Var Harness = Siesta.Harness.Browser.ExtJS; 


Harness.configurel(t 


title : 'Mastering Ext JS Test Suite', 


preload : |[ 


./build/Packt/testing/resources/Packt-all.css', 
'../build/Packt/testing/resources/css/app.css', 


./build/Packt/testing/translations/locale.jJs', 
./build/Packt/testing/all-classes.jJs' 


}); 


Harness.startl( 
'010_sanity.t.jJs', 
'020_login.t.jJs' 

六 


文件 内 容 如 下 : 
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我 们 在 Harness 文 件 的 一 处 配置 两 个 测试 用 例 : 010_sanity.t 和 020_login.t。 同 时 还 需 
要 在 preload 属 性 配置 项 中 添加 我 们 的 CSS 及 应 用 程序 JavaScript 等 相关 文件 ; 程序 代码 硅 想 能 下 
第 测试 ， 就 要 让 Siesta 预 加 载 应 用 程序 的 CSS 以 及 JavaScript 文 件 。 


下 一 步 创 建 tests/index.html 文 件 : 


<1DOCTYPE html> 


<html> 
<head> 
<link rel="stylesheet" type="text/css" href="../bootstrap.css"> 
<link rel="stylesheet" type="text/css" href="../siesta-l1.1.8-1ite/ 


resources/css/siesta-all.css"> 


<script type="text/jJavascript" src="../ext/ext-all.jJs"></script> 
<script type="text/jJavascript" src="../siesta-1.1.8-lite/siesta-all.jJjs"> 
</script> 


<script type="text/jJavascript" src="translations/locale.Js"></script> 
<script type="text/jJavascript" src="index.Js"></script> 
</head> 


<body> 
</body> 
</html> 


在 这 段 HTML 代 人 码 中 ， 我 们 导入 了 Siesta 的 JavaScript 和 和 CSS 文件 ，Ext JS 及 其 CSS 文 件 ， 以 及 
前 面 创建 的 Harness 文 件 index.js。 


现在 开始 创建 项 目 需要 的 所 有 测试 用 例 (这 里 是 两 个 )。 首 先 在 tests 文 件 夹 中 创建 第 一 个 测 
试用 例文 件 010 sanity.t.js: 


StartTest (function(t) { 
t.diag ("Sanity"); 


t.ok(Ext, 'ExtJS is here').: 
t.ok (Ext .Window, 'Ext.Window as well'): 


t.ok(Packt, 'Packt namespace is here') ; 
七 .OK (Packt .view.Login, 'Packt.view.Login as well'); 
t.done(); 


小) 


我 们 要 理解 上 述 代 码 。 所 有 通过 Siesta 实 现 的 测试 代码 必须 都 放 在 StartTest (function (七 ) 
构造 晒 数 里 。 


接 下 来 , 在 构造 函数 里 加 入 了 一 些 断 言 代 码 。 第 一 个 测试 用 例 是 一 个 很 简单 的 示例 : 确认 某 
些 类 已 加 载 ， 比 如 Ext 命 名 空间 以 及 应 用 程序 命名 空间 。 之 后 ,我 们 可 以 确认 ExtJS 框 架 和 我 们 应 
用 的 任意 类 已 存在 ， 这 样 就 可 以 开始 一 些 更 复杂 的 测试 了 。 
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现在 ， 尝 试 执行 第 一 个 测试 用 例 。 要 达成 此 目的 ， 请 在 浏览 避 中 访问 : http://localhost/ 
masteringextjs/tests。 测 试 结果 如 下 图 所 示 : 


e@eAe 园 ocalhost/masteringextjs 


入 CC | [7 localhost/masteringextjs/tests/ 


大 
[ciesta mp el 


Ww Totals:410 010_sanity.tjs 


| 天 Viewsource 旦 Togqle DONvisible 局 Re-run test 


Results 


020_login.tjs ExUS is here 
Ext,Windeow as well 
Packt namespace js he'e 
Packt.view.Login as well 


现在 我 们 来 创建 第 二 个 测试 用 例 。 在 tests 文 件 夹 中 创建 020 login.t.js 文 件 : 


StartTest (function(t) { 
t.diag("Sanity test, loading classes on demand and verifying they were indeed 


loaded."); 
t.ok(Ext, 'ExtJS is here'); // #1 
t.ok(Packt, 'Packt namespace is here'); // #2 
t.requireOk('Packt.view.Login'); // #3 
t.waitForComponent ('Packt.view.Login', true, function(){// #4 
Var submitButton = Ext.ComponentOQOuery.query('login button#submit')[0]; 
t.chain( 
{ action : 'click', target : submitButton } // #5 
); 
t.waitForComponent('Packt.view.MyViewport', true, function(){ // #6 
t.ok(Packt.view.MyViewport, "Packt.view.MyViewport was rendered."); // #7 
t.done(); 
}); 
}); 
}); 
观察 一 下 代码 ,我们 会 发 现 这 个 测试 用 例 变 了 。 总 体 而 言 , 这 个 测试 用 例 确认 Ext( #1 ) 


和 Packt( 塌 ) 命名 空间 已 加 载 ， a gm pa (#3 )， 然 后 等 待 ， 直 到 
组 件 在 屏 友 上 演 染 呈现 ( 检 : 等 竺 加载 页 面谈 出 ),。 一 旦 登录 界面 泻 染 出 来 ， 测 试用 例 就 会 按 下 
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提交 按钮 (大 : 出 于 测试 目的 ， 用 户 名 和 密码 已 经 在 对 应 文本 字段 组 件 中 预 设 了 )。 一 旦 提交 按 
钮 被 点 击 ， 测 试 侠 件 将 等 每 ， 和 直到 视 见 区 演 染 呈现 (#6 )， 然 后 靳 言 宣告 类 已 加 载 (#7 )。 


Siesta 测 试 框架 的 一 个 最 优 特性 就 是 它 具 有 针对 Ext JS 框架 的 特定 测试 用 例 , 从 而 使 测试 相对 
其 他 工具 而 言 容易 得 多 。 为 一 个 优点 是 测试 构造 , 也 就 是 说 测试 用 到 的 业务 逻辑 代码 仍 是 我 们 应 
用 程序 中 的 代码 , 不 需要 在 测试 用 例 中 再 写 一 过， 只 逢 如 上 述 实 现 的 测试 用 例 那 样 位 单 地 调用 这 
些 代码 即 可 。 


如 希望 了 解 更 多 关于 的 Siesta 断 言 功 能 及 测试 能 力 的 信息 ,请 参考 : http://www.bryntum.com/ 
docs/siesta/ ， 或 者 访问 Siesta 安 装 有 目录 下 的 docs 文 件 夹 。 


12.3 有 用 的 工具 箱 


这 里 我 们 将 介绍 一 些 能 够 给 Ext JS 应 用 程序 开发 市 来 很 大 带 助 的 工具 。 本 市 后 面 会 列 出 所 有 
这 些 工 具 的 链接 地 址 。 


第 一 个 工具 是 JSLint， 它 能 够 帮助 我 们 找 出 Java 销 误 ， 并 清理 代码 。 


第 二 个 工具 是 YSlow。YSlow 分 析 Web 页 面 并 告知 我 们 : 基于 高 性 能 网 站 的 规则 标准 ， 为 什 
么 这 些 页面 是 低 性 能 的 。YSlow 是 一 个 集成 在 流行 的 Firebug Web 开 发 工具 里 的 Firefox 扩 展 。 


Ext JS 是 一 个 JavaScript 框 架 ，JavaScript 性 能 是 许多 开发 团队 关心 的 话题 。 最 理想 的 状态 是 用 
户 在 浏览 锅 中 尽 可 能 少 地 加 载 JavaScript 代 码 。 这 也 是 使 用 Sencha command 进 行 产 品 构 造 ， 而 不 
能 简单 地 部 署 所 有 应 用 文件 到 生产 环境 的 重要 原因 。 


Sencha command 也 能 把 Ext JS 的 CSS 文 件 体积 缩减 到 更 小 ， 我 们 还 可 以 只 包含 真正 能 用 到 的 
组 件 的 CSS〈 比如 创建 一 个 自 定 义 主 题 )。 但是， 通常 情况 下 ,会 有 一 个 声明 了 图 标 以 及 目 定 义 
样式 的 应 用 程序 的 CSS。 在 这 里 ,我 们 有 三 个 非 第 有 用 的 小 技巧 来 针对 现实 情况 进行 优化 。 对 于 
自 定义 CSS， 可 以 使 用 如 Sass 或 Less 这 样 的 预 处 理 絮 。 假 设 我 们 用 Sass 或 Less 创 建 app .css， 那么 
要 记 住 编译 输出 的 CSS 体 积 已 经 缩减 了 。 第 二 个 小 技巧 : 即使 不 使 用 Sass 或 Less 编 译 自 定义 CSS ， 
而 是 使 用 像 YUI compressor 和 CSS minifier 这 样 的 工具 ， 也 能 够 达到 在 生产 环境 上 部 署 缩减 版 CSS 
的 目标 。 第 三 个 小 技巧 : 通 稼 情况 下 ， 会 有 多 个 目 定 义 CSS 文 件 ， 这 样 可 以 更 好 地 组 织 样式 。 比 
如 ， 一 个 CCS 文 件 专 门 设置 图 标 ， 另 一 个 针对 普通 设置 ， 再 有 一 个 又 针对 另 一 特定 目的 。 但 对 于 
生产 环境 而 言 ， 始 终 要 记得 把 它们 合并 成 一 个 CSS 文 件 ， 这 样 在 浏览 器 加 载 时 就 会 更 高 效 。 有 一 
个 叫 grunt-contrib-concat 的 工具 可 以 帮助 我 们 达成 此 目的 。 

CSS 精 灵 ( CSS Sprite，CSS 图 像 拼 合 技术 )， 是 男 一 个 非常 重要 的 话题 。 还 记得 在 应 用 程序 
的 很 多 地 方 都 用 到 的 图 标 吗 ?” 还 记得 按钮 图 标 、 面板 图 标 及 标签 页 图 标 吗 ? 你 可 以 用 该 图 像 拼 合 
方法 创建 一 张 带 有 所 有 图 标的 CSS 精 灵图 片 。 在 CSS 里 ， 我 们 只 需 加 入 这 个 单一 图 片 ， 按 照 如 下 12 
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代码 设置 对 应 图 标的 background-position: 


.ICon-message { 
background-image: url('mySprite.png'); 
background-position: -10px -10px; 

} 


.lcon-envolope { 
background-image: url('mySprite.png'); 
background-position: -15px -15px; 

} 


还 有 许多 的 工具 可 以 用 来 创建 CSS 精 灵图 片 : SpritePad 、SpriteMe 以 及 Compass Sprite 
Generator 等 。 


这 里 提 到 的 所 有 工具 ， 其 参考 链接 如 下 。 


DQ JSLint http://www.jslint.com/ 

DQ YSlow http://developer.yahoo.com/yslow/ 

DQ Sass http://sass-lang.com/ 

DQ Less http://lesscss.org/ 

DQ YUI Compressor http://developer.yahoo.com/yuil/compressor/ 

DQ CSS Minifier http:/www.cssminifier.com/ 

D grunt-contrib-concat https://npmjs.org/package/erunt-contrib-concat 

DD SpritePad http://wearekiss.com/spritepad 

DQ SpriteMe http:/www.spriteme.org/ 

DQ Compass Sprite Generator http:/compass-style.org/help/tutorials/spriting/ 


别 忘 了 Ext JS 也 是 JavaScript， 因 此 也 需要 关注 其 性 能 。 通 过 实践 上 述 小 技巧 ，Ext JS 应 用 程 
序 的 性 能 同样 能 够 得 到 提升 。 


最 后 ， 有 两 个 来 目 Sencha 的 重要 工具 : Sencha Architect 和 Sencha Eclipse plugin。 Sencha 
Architect 是 一 个 类 似 Visual Studio 的 可 视 化 设计 工具 : 可 拖 放 并 能 够 看 到 应 用 程序 的 样子 , 所 有 属 
性 配置 项 都 要 通过 配置 面板 设置 ， 只 有 方法 、 哨 数 及 模板 可 以 进入 并 编码 。Sencha Architect 的 优 
点 是 能 够 帮助 我 们 按 最 佳 实践 开发 程序 ， 其 生成 的 代码 组 织 得 非常 好 。 你 可 以 用 Sencha Architect 
开发 所 有 的 Ext JS 程序 ， 而 对 于 服务 需 端 代码 ， 你 仍然 可 以 使 用 你 最 喜爱 的 IDE 来 开发 (Eclipse、 
Aptana、Visual Studio 或 其 他 工具 )。 


Sencha Eclipse Plugin 是 一 个 Eclipse 插件 ， 具 备 代 码 目 动 完成 功能 。Sencha Architect 和 Sencha 
Eclipse plugin 都 是 付费 工具 。 但 你 可 以 出 于 测试 目的 下 载 其 试用 版 本 : http:/www.sencha.comy/ 


products/complete/、http:/www.sencha.com/products/architect/。 
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12.4 从 Ext JS 应 用 到 移动 应 用 


移动 应 用 程序 当下 非常 流行 。 假 设 我 们 开发 出 了 一 个 很 好 的 Ext JS 应 用 程序 ， 通 常 我们 希望 
在 移动 设备 上 也 能 够 有 个 同样 的 应 用 。 大 多 数 人 都 会 认为 Ext JS 技 术 是 跨 浏 览 冀 的 ， 只 需要 把 应 
用 程序 发 布 到 互联 网 , 然后 再 把 链接 发 给 移动 用 户 就 万 事 大 吉 了 。 但 事实 上 并 非 如 此 。 虽然 Ext JS 
也 兼容 移动 浏览 需 , 但 它 并 不 能 为 移动 用 户 提 供 最 佳 的 用 户 体 验 。 如 果 和 希望 为 用 户 提 供 极 佳 的 移 
动 体验 , 就 需要 把 Ext JS 应 用 转换 为 移动 应 用 ,但 是 , 要 怎么 做 呢 ? 学 习 Objective-C、Android Java 
开发 或 是 其 他 的 语言 又 得 花 不 少时 间 ， 而 我 们 也 不 太 可 能 总 有 那么 多 时 间 。 

因此 ， 这 里 打算 介绍 一 下 ExtJS 的 “ 表 兄 肿 ” Sencha Touch。Sencha Touch 是 市 场 上 首 款 
HTML5 移 动 开 发 框架 。 男 一 个 好 消息 是 : 不 需要 重 写 所 有 的 代码 就 能 让 应 用 程序 适 配 移动 设备 。 


Sencha Touch 跟 Ext JS 共 用 一 套 API。 数 据 包 ( 指 Ext .data ) 如 模型 、 存 储 豆 以 及 框架 核心 ， 
都 是 共用 一 个 。Sencha Touch 同 样 也 是 使 用 MVC 架 构 。 欣 制 占 和 视图 (组 件 ) 的 应 用 方式 与 Ext JS 
也 非常 类 似 。 当 然 , 最 大 的 不 同 点 在 于 视图 ， 毕 葛 Web 组 件 不 同 于 移动 组 件 。 然而，Sencha Touch 
也 提供 表单 、 列 表 、 甚 至 为 移动 设备 定制 的 网 格 组 件 等 内 容 。 


至 于 使 用 Sencha Touch 可 以 重用 多 少 代 码 量 ， 下 图 给 出 了 说 明 : 


视图 
部 分 代码 重用 
~ 
100% 代 码 重 用 


存储 器 
代理 服务 器 


服务 器 端 代 码 


所 以 ， 能 够 复 用 的 代码 量 是 非常 大 的 。 同 时 ，Sencha Touch 移 动 应 用 有 两 种 部 署 方式 : 第 一 
种 是 Web App 方 式 ,移动 应 用 部 署 在 站 点 上 ,用户 访 问 Sencha Touch 部 署 的 链接 地 址 ( Sencha Touch 
跟 服 务 硕 端 代码 都 在 同一 个 域 上 ); 第 二 种 是 混搭 方式 ,Sencha Touch 必 用 部 署 在 用 户 的 移动 设备 
上 ( Sencha Touch 提 供 了 ioOS 及 Android 的 原生 打包 工具 ， 但 也 可 以 生成 Sencha Touch 的 原生 
Blackberry 10 和 Windows Phone 8 应 用 )， 服 务 硕 端 代码 部 普 在 服务 硕 或 Web 上 。 这 种 情况 下 ， 可 12 
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以 通过 CORS 来 实现 应 用 与 服务 器 端 代 码 间 的 通信 我们 已 经 在 第 10 章 讨论 过 了 )。 


products/touch/。 


| 如 希望 了 解 更 多 关于 Sencha Touch 的 内 容 ， 请 参考 http://www.sencha.com/ | 


12.5 ”第 三 方 组 件 和 插件 


尽管 Ext JS 提 供 了 大 量 的 组 件 ， 但 我 们 还 是 有 可 能 逢 要 开发 日 己 的 组 件 , 或 者 使 用 其 他 开发 
者 开发 的 组 件 。 关 于 该 主题 的 Ext JS 社 区 规模 非 第 大 。 大 量 开发 者 在 社区 里 分 至 他 们 的 组 件 、 扩 
展 以 及 插件 。 以 下 是 两 个 主要 社区 及 地 址 。 


口 Sencha 市 场 ”https://market.sencha.com/ 
口 Sencha 论 坛 http://www.sencha.com/forunyforumdisplay.php?82-Ext-User-Extensions-and-Plugins 


12.6 ”小结 


本 章 我 们 了 解 了 调试 Ext JS 应 用 程序 的 重要 性 及 相关 知识 ， 还 了 解 了 一 些 能 够 给 我 们 的 调试 
工作 带 来 帮助 的 工具 。 我 们 学 习 了 如 何 使 用 Siesta (开源 工具 ， 提供 了 精简 版 及 付费 版 ) 创建 Ext 
JS 应 用 程序 的 测试 用 例 。 同 时 , 了 解 了 性 能 优化 的 重要 性 , 并 通过 一 些 免费 工具 优化 了 我 们 的 Ext 
JS 应 用 程序 的 性 能 。 最 后 我 么 还 掌握 了 一 些 如 何 把 Ext JS 应 用 程序 迁移 到 移动 平台 上 的 方法 ， 并 
知道 在 哪里 可 以 找到 项 目 所 需 的 插件 、 扩 展 以 及 新 组 件 。 


现在 ， 让 我 们 充分 发 挥 创造 力 ， 使 用 Ext JS 来 创建 了 不 起 的 应 用 吧 ! 


关注 图 灵 教育 关注 图 灵 社 区 
iT uring.cn 


在 线 出 版 _ 电子 书 《 码 农 》 杂志 图 灵 访 谈 


各 


QQ 联系 我 们 
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微 博 联系 我 们 


官方 账号 : @ 图 灵 教 育 @ 图 灵 社 区 @ 图 灵 新 知 
市 场合 作 : @ 图 灵 豆 野 @ 图 灵 刘 紫 凤 
写作 本 版 书 : @ 图 灵 小 花 @ 陈 冰 _ 图 书 出 版 人 
翻译 英文 书 ， @ 李 松 峰 @ 朱 冰 ituring @ 楼 伟 珊 
翻译 日 文书 或 文章 : @ 图 灵 乐 声 
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短信 联系 我 们 


图 灵 访 谈 


turingbooks ituring_interview 


Ext JS 是 一 个 用 JavaScript 编 写 的、 独立 于 后 台 技 术 的 前 端 AJAX 框 架 ， 可 以 用 在 .NET、Java、PHP 等 各 种 编程 语 
言 开 发 的 应 用 中 ， 以 开发 华丽 的 富 客户 端 应 用 。 用 Ext JS 打造 的 RIA_ Web 应 用 不 仅 具 有 与 桌面 程序 一 样 的 标准 用 户 界 
面 与 操作 方式 ， 而 且 能 够 跨 浏览 器 平台 运行 。Ext JS 业已 成 为 开发 具有 完满 用 户 体验 的 Web 应 用 的 完美 之 选 。 

作为 一 本 内 容 详实 的 Ext JS 学 习 指 南 ，《 精 通 Ext JS》 以 Ext JS 4.2 为 依托 ， 站 在 开发 者 的 角度 思考 问题 ， 将 应 用 
划分 为 不 同 的 功能 模块 ， 一 章 解 决 一 个 任务 ， 带 我 们 渐进 式 开发 基于 MVC 的 完整 上 应用， 经历 从 界面 原型 到 产品 上 线 前 
的 各 个 阶段 。 其 中 ， 你 将 学 会 实现 用 户 及 分 组 安全 功能 ， 掌 握 网 格 、 表 单 、 图 表 和 树 形 结构 ， 以 及 将 不 同 表 示 结 构 的 
内 容 导 出 成 PDF 和 Excel 格 式 的 最 佳 实践 方式 。 而 且 ， 在 开发 完成 应 用 程序 的 所 有 功能 后 ，Loiane Groner 还 将 市 你 自 


Wr 


开发 内 容 管理 模块 ; ~ 
服务 器 端的 信息 处 理 ( 避免 使 用 JSON 文 件 ) ; IAA 、 
构建 WordPress 主 题 ( Ext JS 的 不 同 应 用 场景 ) ; 人 Ma 7 
开发 电子 邮件 客户 端 、 分 组 及 安全 模块 ; | 可 
构建 产品 级 应 用 ; , 顽 


Ext JS 应 用 调试 与 测试 ; 少 
重用 代码 构建 移动 应 用 的 方法 。 境 


ISBN 978~7=-1T15-34723=7 
2 由 > 


ISBN 978-7-115-34723-7 
定价 : 59.00 元 


分 类 建议 ”计算 机 /程序 设计 /Ext JS 


欢迎 加 入 


图 灵 储 区 


电子 书 发 售 平台 


电子 出 版 的 时 代 已 经 来 临 ， 在 许多 出 版 界 同行 还 在 犹 耳 往 得 的 时 候 ， 图 灵 社 区 已 经 
采取 实际 行动 拥抱 这 个 出 版 业 巨 变 。 相 比 纸 质 书 ， 电 子 书 具 有 许多 明显 的 优势 。 已 
不 仅 发 布 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩色 图 片 (即使 有 的 书 纸 质 版 是 黑 日 印 
刷 的 ) 。 读 者 还 可 以 方便 地 进行 搜索 、 和 剪贴 、 复 制 和 打 。 


图 灵 社 区 进一步 把 传统 出 版 流程 与 电子 出 版 业务 紧密 结合 ， 目 前 已 实现 作 译 者 网 上 
交 稿 、 编 辑 网 上 审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模式 ， 我 们 称 之 为 
敏捷 出 版 ”， 叱 可 以 让 读者 以 较 快 的 速度 了 解 到 国外 最 新 扩 术 图 书 的 内 容 ， 吹 补 
以 往 翻译 版 技术 书 “ 出 版 即 过 时 ”的 缺憾 。 同 时 ， 敏 捷 出 版 使 得 作 、 译 、 编 、 读 的 
交流 更 为 方便 ， 可 以 提前 消灭 书稿 中 的 销 误 ， 最 大 程度 地 保证 图 书 出 版 的 质量 。 


开放 出 版 平台 


图 灵 社 区 同 读 者 开放 在 线 写 作 功 能 ， 协 助 你 实现 目 出 版 的 梦想 。 你 可 以 联合 二 三 好 
友 共 同 创作 一 部 扩 术 参考 书 ， 以 免费 或 收费 的 形式 提供 给 读者 ， 这 极 大 地 降低 了 出 
版 的 门 覃 。 成 玖 的 书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 

图 灵 社 区 引进 出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 社区 公布 。 如 果 有 和 意 翻 译 哪 本 
图 书 ， 欢 迎 来 社区 申请 。 只 要 通过 试 译 的 考验 ， 即 可 侈 约 成 力图 灵 的 译 者 。 当 然 ， 
要 想 成 功 地 完成 一 本 书 的 翻译 工作 ， 是 需要 有 坚强 的 儿 力 的 。 


读者 交流 平台 
在 图 灵 社 区 ， 读 者 可 以 十 分 方便 地 写作 文章 、 提 交 勘 误 、 发 表 评论 ， 以 各 种 方式 与 


作 译 者 、 编 辑 人 员 和 其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社区 银子 。 欢 迎 
大 家 积极 参与 社区 开展 的 访谈 、 审 读 、 评 选 等 多 种 活动 ， 赢 取 银子 ， 可 以 换 书 哦 


